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
}