Storing and Retrieving Data with JavaScript Local Storage

What is Local Storage?

Local storage is a good way to store data in a web browser with no expiration date. This means the data will still be there even if you close and reopen the browser.

Use Case

You can save user preferences like theme (dark or light mode), language, and other settings using Local Storage.

What is Session Storage?

Session Storage is like Local Storage because you can save data using key/value pairs. But, when users close the tab or window, the data in the session storage is deleted.

Use Case

This is really useful for storing information that is only needed for a short period of time until the user closes the browser. Like things you type into forms or temporary app settings.

Storing Data

To store data in Local Storage, use the localStorage.setItem('key', 'value') method with a key and value.

// storing a string
localStorage.setItem("username", "James");

// storing a number
localStorage.setItem('userAge', 30);

// Preparing an object to store in local storage
const userData = {
	name: "James",
	age: 30,
	country: "India"
};
// Local Storage only supports strings
// Converting the object to a JSON string and storing it in local storage
localStorage.setItem("userData", JSON.stringify(userData));

Retrieving Data

To retrieve data from Local Storage, use the localStorage.getItem('key') method with the key.

// Retrieving a string
const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

// Retrieving a number
const userAge = localStorage.getItem("userAge");
console.log(userAge); // Output: 30

// Retrieving the stored JSON string
const userData = localStorage.getItem("userData");

// Parsing it back to an object
const retrievedUserData = JSON.parse(userData);

console.log('User Data:', retrievedUserData);
// Output: User Data: { name: "James", age: 30, country: "India" }

Removing Data

To remove a specific item from Local Storage, use the localStorage.removeItem('key') method with the key.

This demonstrates how to remove an item from local storage and verify its removal.

// Removing the stored string "username" from local storage
localStorage.removeItem("username");

// Attempting to retrieve the removed item to confirm it has been deleted
const removedUsername = localStorage.getItem("username");
console.log(removedUsername); // null

Clearing All Data

To clear all data from Local Storage, use the localStorage.clear() method.

This demonstrates how to clear all items from local storage and verify their removal.

// Clearing all items from local storage
localStorage.clear();

// Attempting to retrieve the items to confirm they have been deleted
const clearedUserAge = localStorage.getItem("userAge");
const clearedUserData = localStorage.getItem("userData");
console.log(clearedUserAge); // Output: null
console.log(clearedUserData); // Output: null

Using localStorage.clear() can have several drawbacks, such as the total loss of all stored data. This can negatively impact the user experience by erasing preferences, settings, and important information. Additionally, Once the data is cleared, it cannot be recovered.

Usage Session Storage

// storing
sessionStorage.setItem("username", "James");
// Retrieving
sessionStorage.getItem("username");
// Removing
sessionStorage.removeItem("username");

Storage Capacity

Different browsers may have different implementations, storage limits. Most modern browsers provide a storage limit of approximately 5-10 MB per origin.

Local Storage usually offers a larger storage capacity of around 5MB per origin, while Session Storage also generally offers around 5MB per tab or window. This is much more than the 4KB limit of cookies.

Benefits

Usage: Data can be easily stored and retrieved using a simple API.

Storage: Larger storage capacity compared to cookies (typically around 5MB per origin).

Disadvantages

Local storage and session storage are both useful for storing data on the client side, they come with several disadvantages that developers must consider. It is not safe to store important information here as there is no encryption.

Security Risks

Vulnerability to XSS Attacks: Data in local storage can be accessed by any JavaScript running on the page, making it vulnerable to cross-site scripting (XSS) attacks.

No HTTP-Only Protection: Unlike cookies, local storage data cannot be flagged as HTTP-only, meaning it can be accessed via JavaScript at any time.