Question

我基本上将输入值添加到vals数组。

然后将数组保存到localStorage：localStorage.setItem('mylist', JSON.stringify(vals));

之后，我会显示vals数组的值。

它将值保存到localStorage，但是当我刷新时，值不会显示在我的动态创建的li元素的屏幕上。

为什么？

注意：我想将localstorage与JSON一起使用。

var input = document.getElementById("input");
var box = document.querySelector(".box");

var vals = [];
var li;
var list;

input.addEventListener("keyup", function(e) {
  var val = e.target.value;

  if (e.which == 13) {
    box.innerHTML = "";
    input.value = " ";

    // Push input value array
    vals.push(val);
    localStorage.setItem('mylist', JSON.stringify(vals));

    // Loop input values
    list = vals.map(function(item, index) {
      li = document.createElement("LI");
      box.appendChild(li);
      li.innerHTML = JSON.parse(localStorage.getItem('mylist'))[index];
    });
  }

}, false);

box.innerHTML = list;

Answer 1

页面加载后你不会从localStorage读取任何内容。您只能在keyup处理程序中从存储中读取数据，但是在使用新值覆盖它之后立即执行此操作。加载页面时，您必须从存储中获取数据：用这个：

var list = JSON.parse(localStorage.getItem('mylist'))

Answer 2

页面刷新后，list数组为空。这将解决它：

var vals = JSON.parse(localStorage.getItem('mylist')  || "[]");

vals.forEach(function(entry) {
    li = document.createElement("LI");
    box.appendChild(li);
    li.innerHTML = entry;
})

如果|| "[]"返回null（用户从未设置列表），则localStorage是一个回退

您还应该删除脚本的最后一行（box.innerHTML = list;）

Answer 3

保存在localStorage，但在您的代码中，刷新后，您永远不会在HTML中填充值。

var input = document.getElementById("input");
var box = document.querySelector(".box");

var storageVals = localStorage.getItem('mylist');
var vals = storageVals ? JSON.parse(storageVals) : [];

input.addEventListener("keyup", function(e) {
  var val = e.target.value;

  if (e.which == 13) {
    box.innerHTML = "";
    input.value = " ";

    // Push input value array
    vals.push(val);
    localStorage.setItem('mylist', JSON.stringify(vals));

    renderList();
  }

}, false);

function renderList() {
  // Loop input values
  vals.forEach(function(item, index) {
    var li = document.createElement("LI");
    box.appendChild(li);
    li.innerHTML = JSON.parse(localStorage.getItem('mylist'))[index];
  });
}

renderList();

设置localstorage项后，无法在屏幕上显示

3 个答案: