localStorage vs sessionStorage

localStorage vs sessionStorage

Introduction

localStorage and sessionStorage are objects part of the web storage API. They serve as an advantage when wanting to save data locally as key/value pairs.

  • localStorage - Data is accessible until the browser or web application cache is cleared.
  • sessionStorage - Data is accessible until the user closes the window or tab in the browser.

Store Data

//Stores data by key
localStorage.setItem(testKey, 'Test123');
sessionStorage.setItem(testKey, 'Test123');

Read Stored Data

var storedData = localStorage.getItem(testKey);
console.log(storedData);
//Returns: Test123

var storedData = sessionStorage.getItem(testKey);
console.log(storedData);
//Returns: Test123

Delete Stored Data

//Removes specified key and data from storage.
localStorage.removeItem(testKey);
sessionStorage.removeItem(testKey);

Clear All Storage

//Clears all keys currently stored.
localStorage.clear();
sessionStorage.clear();

Store Non-String Data w/ JSON

var obj = {
      name: 'John',
      email: 'john@example.com'
};
localStorage.setItem(testKey, JSON.stringify(obj);
sessionStorage.setItem(testKey, JSON.stringify(obj);

Read Stored Non-String Data w/ JSON

var storedData = JSON.parse(localStorage.getItem(testKey);
console.log(storedData);
//Returns: name: John, email: john@example.com

var storedData = JSON.parse(sessionStorage.getItem(testKey);
console.log(storedData);
//Returns: name: John, email: john@example.com

Check Storage

if(localStorage.length > 0) {
  //Do something
}
else {
  //Storage is empty
}

if(sessionStorage.length > 0) {
  //Do something
}
else {
  //Storage is empty
}