我如何在本地存储中存储一个数组，然后获取内容，然后将它们添加到 select 对象

Question

这是我用来获取数组然后将它们添加到 select 对象的代码。

var select = document.getElementById('select');
var theArray = localStorage.getItem("array")
JSON.parse(theArray)
if (theArray != null){
  for (var i=0; i > theArray.length; i++){
    select.add(theArray[i])
  }
}

这是我用来设置 localStorage 值的代码。

var select = document.getElementById('select');
var option = document.createElement("option");
      option.text = visText;
      option.value = actVal;
      select.add(option)
      theArray[theArray.length+1] = option;
localStorage.setItem("array",JSON.stringify(theArray))

谁能告诉我如何解决这个问题？

Answer 1

您似乎忘记将已解析的 Json 分配给变量：

let select = document.getElementById('select')
let data = JSON.parse(localStorage.getItem('array'))

for(let entry of data) {
  select.add(new Option(entry))
}

不能 100% 确定它是否有效，但应该可以。

Answer 2

你可以直接用点号调用session和local storage。下面的代码片段显示了这一点。但是，此处的代码段是沙盒化的，无法写入。因此，为了演示如何从数组中填充 select 元素，我使用了 try..catch 块，因此当它出错时，它至少会使用原始 [=] 填充 select 选项14=]变量。

const array = new Array(10).fill(0).map((elm, idx) => (elm = idx, elm));
let arrayFromStorage;

try {
  window.localStorage.myArray = JSON.stringify(array);
  arrayFromStorage = JSON.parse(window.localStorage.myArray);
} catch (error) {
  console.warn(error.message)
  arrayFromStorage = array;
}

arrayFromStorage.forEach(elm => {
  const opt = document.createElement('option');
  opt.value = elm;
  opt.innerText = `option ${elm}`;
  document.querySelector('select').append(opt);
})

<select></select>

如果你copy/paste把它放到浏览器控制台，你可以看到它可以使用点符号设置和调用

const array = new Array(10).fill(0).map((elm, idx) => (elm = idx, elm));
let arrayFromStorage;
window.localStorage.myArray = JSON.stringify(array);
arrayFromStorage = JSON.parse(window.localStorage.myArray);

我如何在本地存储中存储一个数组，然后获取内容，然后将它们添加到 select 对象

How do i store an array in localstorage and then get the contents and then add them to a select object

html

javascript

dom