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

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

javascript html

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

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

函数addToList（）{
var li=document.createElement（“li”）；
var inputValue=document.getElementById（“myInput”）.value；
var tn=document.createTextNode（inputValue）；
李.儿童（tn）；
如果（inputValue==''）{
警惕（“你必须写点什么！”）；
}否则{
文件.getElementById（“myUL”）.appendChild（li）；
}
document.getElementById（“myInput”）.value=“”；
var span=document.createElement（“span”）；
var txt=document.createTextNode（“\u00D7”）；
span.className=“关闭”；
span.appendChild（txt）；
李.儿童（span）；
对于（i=0；i


saveList（）函数是我想要定义的，它允许用户保存列表，以便他们可以关闭浏览器并使用从本地存储检索的已保存数据重新打开。希望这是有意义的。
在函数addToList
中，您可以简单地推送（）
所需的数据，然后将其添加到本地存储：
var data = [];

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

您可以在saveList（）
中添加窗口.localStorage部分，而不是
addToList（）
，两者都可以正常工作
最后，当您需要检索它时，只需将这个字符串化的JSON解析为一个数组：
var data = JSON.parse(localStorage.getItem("data"));

另请阅读：并且
似乎您正在寻找的是将应用程序状态保存在浏览器的本地存储或浏览器的cookie中
看看这个答案：

这就是说，如果您选择将用户的信息保存为cookie，用户可以随时删除这些cookie，此外，一些浏览器会出于许多不同的原因定期清除cookie：
这是否回答了您的问题？我是否应该将用于检索数据的语句放在onload（）中，因为我希望在每次重新加载/重新打开浏览器时检索数据？是的，您可以将其添加到onload（）中，但也可以在不添加onload的情况下添加，两者都可以正常工作：）