如何将数据保存在 localStorage 中，我们关闭浏览器后会留在那里？

Question

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

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

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

localStorage.getItem("data");

我得到“未定义”。

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

Answer 1

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

下面的代码显示了如何执行此操作，但由于沙盒，它在 Stack Overflow sn-p 环境中不起作用。您可以看到一个工作版本 here。填写你的名字，然后点击按钮，复制网址，关闭浏览器，然后打开一个新的浏览器标签页，返回页面。

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>