Browser - Web API - Local Storage

1 - About

Window/localStorage of the web api

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

3 - Charactertistic

  • 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.
data stored in sessionStorage gets cleared when the browsing session ends—that is, when the browser is closed.

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

5 - Management

5.1 - Show

The devtool can show you the local storage.

5.2 - Length


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

5.3 - Set


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

5.4 - IsSet

  • value is null if the key is not found

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

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

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

5.7 - Remove

  • one

localStorage.removeItem(key);

  • all

localStorage.clear();

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

5.9 - Security

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

6 - Support

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

7 - Documentation


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap