Javascript 设置本地存储项后，可以'；不要在屏幕上显示它

我基本上会将输入值添加到

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;

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

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

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

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

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

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

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

||“[]”
是在
localStorage
返回null（用户从不设置列表）时的一种回退

您还应该删除脚本的最后一行（
box.innerHTML=list；
）
页面刷新后，
列表
数组为空。这将解决它：

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

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

||“[]”
是在
localStorage
返回null（用户从不设置列表）时的一种回退

您还应该删除脚本的最后一行（
box.innerHTML=list；
）
它保存在
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
中，但在您的代码中，在刷新后，您永远不会在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();

看起来很好，你期待什么？再次运行小提琴，你看到未定义。我想从本地存储存储甚至页面刷新@Zakariaacharkith发生这种情况是因为您重写了存储。您在
addEventListener
中添加了append
，您需要使用
var data=localStorage.getItem（'mylist'）
，然后设置/append
，如果数据可用。看起来很好，您期望什么？再次运行fiddle，您会看到未定义。我想从本地存储存储甚至页面刷新@Zakariaacharkith发生这种情况是因为您重写了存储。您在
addEventListener
中添加了append
，您需要使用
var data=localStorage.getItem（'mylist'）
，然后设置/append
，如果数据可用。是的，我知道，但我想用li元素显示它。它们现在只是文本。要将它们显示为
li
元素，您必须先从存储器中读取数据，然后根据此数据打印
li
。是的，我知道，但我想用li元素显示。它们现在只是文本，要将它们显示为
li
元素，您必须先从存储器中读取数据，然后根据此数据打印
li