如何关闭浏览器，将数据保存在localStorage中并保存在那里？

Question

我编写了以下脚本并在控制台中运行它：

var data = "dfsfds";
localStorage.getItem("data");
localStorage.setItem("data",data);

然后，我关闭了浏览器，然后重新打开。 当我输入控制台时：

localStorage.getItem("data");

我得到“未定义”。

我认为应该在关闭浏览器后将本地存储保留在浏览器内存中。 为什么这里没有发生？

Answer 1

您必须从域加载的页面中运行此代码。 这意味着代码必须在通过HTTP访问的服务器上运行。 这就是浏览器将一个站点的localStorage数据与另一个站点分开的方式。

下面的代码显示了如何执行此操作，但是由于沙箱操作，它在此处的Stack Overflow代码段环境中不起作用。 您可以在此处查看工作版本。 填写您的姓名，然后单击按钮，复制URL，关闭浏览器，然后打开新的浏览器选项卡并返回页面。

 window.addEventListener("DOMContentLoaded", function(){ var g1 = document.querySelector(".greeting1"); var g2 = document.querySelector(".greeting2"); // Check localStorage to see if the user has already told us their name var name = localStorage.getItem("name"); if(name){ // Put the name into the <span> document.getElementById("user").textContent = name; // Hide the initial greeting and show the welcome back greeting g1.classList.add("hide"); g2.classList.remove("hide"); } else { // Show the initial greeting and hide the welcome back greeting g1.classList.remove("hide"); g2.classList.add("hide"); } // Set up a click event handler for the button var btn = document.querySelector("button"); btn.addEventListener("click", function(){ // When the button is clicked, save the value from the textbox into localStorage localStorage.setItem("name", document.querySelector("input").value); }); }); 

 .hide { display:none; } 

 <div class="greetings"> <div class="greeting1"> <p>Please enter your name: <input type="text"><button>Save my name</button></p> </div> <div class="greeting2 hide"> <p>Welcome back <span id="user"></span></p> </div> </div>