Как сохранить данные в localStorage, которые останутся там, мы закроем браузер?

Question

я написал следующий скрипт и запустил его в консоли:

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

Тогда я закрыл Broswer и вновь его. Когда я набрал консоль:

localStorage.getItem("data"); 

Я получил «неопределенный».

Я думаю, что локальное хранилище должно оставаться в памяти браузера после закрытия браузера. Почему этого не происходит?

Answer 1

Вы должны запустить этот код со страницы, загруженной из домена. Это означает, что код должен выполняться на сервере, к которому осуществляется доступ через HTTP. Вот как браузер хранит данные одного из сайтов localStorage отдельно от другого.

Код, показанный ниже, показывает, как это сделать, но он не будет работать в среде Snacket 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>