Browser - Web API - Local Storage

Window/localStorage of the web api is a browser/client side data storage mechanism.

The localStorage property allows you to access a local Storage object and therefore it implements all the function of the Storage API (interface).

• data stored in a localStorage object has no expiration time
• you cannot list all keys, you need therefore to know the key
• Pages on other domains can't access the same storage objects.

• Listen to storage event on other page whenever a change is made to the Storage object. It won't work on this page

window.addEventListener('storage', function(e) {  
  console.log( e.key );
  console.log( e.oldValue );
  console.log( e.newValue );
  console.log( e.url );
  console.log( JSON.stringify(e.storageArea) );
});

• Set/Get

let key = 'key';

// value is null if the key is not found
if(!localStorage.getItem(key)) {
  localStorage.setItem(key, 'Default');
} 

// value may be null if the key is not found
let value = localStorage.getItem(key);
console.log('The value of the key is '+value )

The devtool can show you the local storage.

console.log("There is "+localStorage.length+" key pairs in your local storage");

localStorage.setItem(key, value);
// or
localStorage.key = value;
// or
localStorage[key] = value;

• value is null if the key is not found

if(!localStorage.getItem(key)) {
  // Not set
  localStorage.setItem(key, 'Default');
} 

let keyValue = localStorage.getItem(key);
// or
let keyValue = localStorage.key;
// or 
let keyValue = localStorage[key];
// or where i is the position (localStorage.length gives you the length of a localStorage)
let keyValue = localStorage.key(i);

console.log("There is "+localStorage.length+" key/pair that are:")
for(var i =0; i < localStorage.length; i++){
  var key = localStorage.key(i);
  var item = localStorage.getItem(key)
  console.log("  - "+(i+1)+" : "+key+" : "+JSON.stringify(item).substr(0,30));
}

• one

localStorage.removeItem(key);

• all

localStorage.clear();

Storage event is a way for other pages on the domain using the storage to sync any changes that are made.

• Listen to to storage event on other page whenever a change is made to the Storage object

window.addEventListener('storage', function(e) {  
  console.log( e.key );
  console.log( e.oldValue );
  console.log( e.newValue );
  console.log( e.url );
  console.log( JSON.stringify(e.storageArea) );
});

localStorage is protected by the same-origin policy. Any code that is not from the same origin cannot access the same data.

You may get this error when javascript is running on Node and not in the browser.

To make your script, Node proof, add this following condition:

if (typeof window != 'undefined') {
  // whatever with localstorage
  window.localStorage.setItem(key, JSON.stringify(state));
}

• https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API