重新打开浏览器时如何将数据保存到LocalStorage并检索答案

【问题标题】：How to save data to LocalStorage and retrieve when reopen browser重新打开浏览器时如何将数据保存到LocalStorage并检索
【发布时间】：2019-11-16 01:56:35
【问题描述】：

我创建了一个简单的网站来添加和删除待办事项列表中的项目，用户可以在其中输入项目并添加到当前列表中。我希望用户能够保存当前列表，当他们从同一个浏览器打开时，他们可以看到上次编辑的列表。换句话说：使用本地存储功能来实现这一点（不使用任何服务器端脚本或数据库）。不知道如何通过用户点击保存按钮来实现这一点。这是我的html代码：

<html>
<body>
    <div id="myDIV" class="header">
        <h1>My To Do List</h1>
        <input type="text" id="myInput" placeholder="Add to the list">
        <span onclick="addToList()" class="addBtn">Add</span>
    </div>

    <ul id="myUL">
        <li>Go to grocery</li>
        <li>Pay bills</li>
        <li>Go to class</li>
        <li>Clean home</li>
        <li>Do laundry</li>
        <li>Do homework</li>
    </ul>

    <button onclick="saveList()" type="button">Save</button>

    <script src="index.js"></script>
</body>

这是我的 JavaScript 代码：

function addToList() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var tn = document.createTextNode(inputValue);
  li.appendChild(tn);

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
    }
  }
}

我想定义 saveList() 函数以允许用户保存列表，以便他们可以关闭浏览器并使用从本地存储中检索的已保存数据重新打开。希望这是有道理的。

【问题讨论】：

这能回答你的问题吗？ Storing Objects in HTML5 localStorage

标签： javascript html

【解决方案1】：

在addToList函数中，您可以简单地push()您想要的数据，然后将其添加到localStorage：

var data = [];

function addToList(){
    //Code...
    data.push("What Ever");
    window.localStorage.setItem('data', JSON.stringify(data));
    //Code...
}

您可以在saveList() 中添加window.localStorage 部分，而不是 addToList()，两者都可以正常工作

最后，当您需要检索它时，只需将这个字符串化的 JSON 解析为一个数组：

var data = JSON.parse(localStorage.getItem("data"));

另请阅读：LocalStorage 和 How do I store an array in localStorage?

【讨论】：

我是否应该将检索数据的语句放在 onload() 中，因为我希望每次重新加载/重新打开浏览器时都检索数据？
是的，你可以在 onload() 中添加它，但你也可以在没有 onload 的情况下添加它，两者都可以正常工作:)

【解决方案2】：

看来您正在寻找的是将应用程序状态保存在浏览器本地存储或浏览器的 cookie 中..

看看这个 SO 答案： How to store this data in cookies?

话虽如此，如果您确实选择将用户信息保存为 cookie，这些 cookie 很容易被您的用户删除，此外，某些浏览器会出于多种不同原因定期清除 cookie：

https://helpcenter.verticalresponse.com/articles/VR2/Browser-Hygiene-The-Importance-of-Clearing-Cache-and-Cookies

【讨论】：