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

Question

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

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

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

localStorage.getItem("data");

我得到了“未定义”。

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

Answer 1

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

下面的代码展示了如何执行此操作，但由于沙箱的原因，它在 Stack Overflow 代码片段环境中不起作用。您可以看到一个工作版本here 。填写您的姓名，然后单击按钮，复制 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>