What is the Browser Local Storage? (Web API )

About

localStorage ¹⁾ is a browser/client side data storage mechanism.

It's one of the two web storage (key/pair) api and is part of the web api

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

Example

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 )

Rendered by WebCode

Characteristic / Security / Access

Data stored in a localStorage object has no expiration time.
The data is secured by origins
- Not available from pages loaded from other origins
- available to all scripts from pages that are loaded from the same origin

data stored in sessionStorage gets cleared when the browsing session ends—that is, when the browser is closed.

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

Use cases

data that needs to be accessed:
- across windows or tabs,
- across multiple sessions,
to store large (multi-megabyte) volumes of data for performance reasons

Management

Show

The devtool can show you the local storage by origin

Length

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

Rendered by WebCode

Set

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

IsSet

value is null if the key is not found

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

Get

value may be null if the key is not found
You get always a string. test the string in predicate then otherwise you got a boolean problem. !'false' is false and not true.

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);

List

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));
}

Rendered by WebCode

Remove

localStorage.removeItem(key);

localStorage.clear();

Listen

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

This won't work on the same page that is making the changes

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) );
});

Support

localStorage is not defined

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));
}

Documentation

¹⁾

localStorage