minte9
LearnRemember   JAVASCRIPT





Local Storage

The data survies browser restart. With sessionStorage() the data survives a page restart. 
 
let a = localStorage.<span class='keyword_code'>getItem</span>('a') ? localStorage.getItem('a') : 0;

a++;

localStorage.<span class='keyword_code'>setItem</span>('a', a);

if (a > 3) localStorage.removeItem('a');

console.log(a); // 1,2,3,4 ... 1,2,3,4 ...

Object-like access

Not recommended because you can't use storage event. 
 
let b = <span class='keyword_code'>localStorage.b</span> ? localStorage.b : 0;

b++;

localStorage.b = "b";

if (b > 3) { delete localStorage.b; }

console.log(b); // 1,2,3,4 ... 1,2,3,4 ...

Storage event

The event triggers on all window objects where the storage is accesible (except the one that caused it). a.html 
 
let ab = "<span class='keyword_code'>A message</span>";

localStorage.setItem('ab', ab);

console.log("A window"); // A window

window.addEventListener('storage', function(event) {
    
    if (event.key != 'ab') return;
    
    ab = event.<span class='keyword_code'>newValue</span>;
    
    <span class='keyword_code'>alert</span>(ab); // B message
});
b.html 
 
let ab = "B message";

localStorage.setItem('ab', ab);

console.log("B window"); // B window
 
window.addEventListener('storage', function(event) {
    
    if (event.key != 'ab') return;
    
    ab = event.newValue;
    
    <span class='keyword_code'>alert</span>(ab); // A window
});

Strings only

Both key and value must be a strings. 
 
let data = {
    user: {name: "John", userId: "1"},
};

console.log(data.user); // object

localStorage.setItem("storageData", JSON.stringify(data));

let sessData = localStorage.getItem("storageData");

console.log(sessData); // string

console.log(JSON.parse(sessData).user); // object




References: