如何将数据保存在localStorage中，我们将关闭浏览器？

Question

我写了下面的脚本，并在控制台运行它：

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

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

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>