我的 localStorage 没有保存任何内容

Question

所以这就像一个待办事项列表网站，但是当我刷新时，什么都没有保存！
以下是 HTML 和 JavaScript：

localStorage.setItem('myInput'); {
  var save = localStorage.getItem("myInput");
}
localStorage.setItem('myInput2'); {
  var save = localStorage.getItem("myInput2");
}
localStorage.setItem('myInput3'); {
  var save = localStorage.getItem("myInput3");
}

<div class="modal-content">
  <span class="close">&times;</span>
  <div id="myDIV" class="header">
    <h2>Add a task</h2>
    <input type="text" id="myInput" placeholder="Write a task...">
    <input type="text" id="myInput2" placeholder="Estimated time...">
    <input type="text" id="myInput3" placeholder="Week...">
    <span onclick="newElement()" class="addBtn" value="save" onClick="save()">Add</span>
  </div>
</div>
</div>


<ul id="tehtavat">
</ul>

我还在控制台中收到此错误：

index.html 未捕获类型错误：无法在“存储”上执行“setItem”：需要 2 个参数，但仅存在 1 个。

Answer 1

当您想将值保存到本地存储时，您需要传递一个值作为第二个属性。第一个是关键。

localStorage.setItem('myInput', myValue);

将本地存储视为key / value成对的列表。

此外，您希望在每次数据更改时手动将数据写入本地存储，因此我们就keyup事件而言：

document.getElementById('myInput').addEventListener('keyup', function(event){
    localStorage.setItem('inputValue', event.target.value);
})

我可以想象，在加载时，您希望恢复该值；

var inputValue = localStorage.getItem('inputValue');

if(inputValue) {  //just check if there's value saved
    document.getElementById('myInput').value = inputValue;
}

请考虑到我在没有测试的情况下凭空输入代码，因此可能存在一些拼写错误。您也可以尝试自己解决拼写错误。