logo
add image

Javascript Localstorage

  • Home
  • Javascript Localstorage
JavaScript LocalStorage

Client side storage is very important to improve performance and user-experience in moderm web development. Web Storage API have an important component called LocalStorage used to save data in a web browser in a persistent manner. Unlike cookies, LocalStorage has no expiration date and provides a way to store data between sessions. In this article, we will learn about JavaScript LocalStorage, its methods, benefits with the help of examples.

 

What is LocalStorage?

Modern browsers come with a feature called LocalStorage that allows key-value pairs to be stored in a local storage object. Even after closing and reopening the browser, the user can still access the stored data. Data stored in LocalStorage is domain-specific, meaning that it can only be accessed from the same protocol, domain, and port.

 

Characteristics

Characteristics Description
Persistence Data is not deleted even after restarting the browser or reloading the page.
Key-Value Storage It stores data as string key-value pairs.
Domain-Specific Data can only be accessed within the same domain.
Synchronous API The main thread may be blocked during synchronous activities involving huge amounts of data.
Storage Limit It can store around 5MB per domain, which varies by browser.

 

How to Use it?

First, We need to check our browser is supporting LocalStorage or not by below code:

Example

if (typeof(Storage) !== "undefined") 
{
    console.log("LocalStorage is supported!");
} 
else 
{
    console.log("LocalStorage is not supported!");
}

 

Setting Data

To store data in LocalStorage, we use the setItem() method:

localStorage.setItem("username", "JohnDoe");

 

Retrieving Data

To get stored data from LocalStorage, we use getItem() method:

let username = localStorage.getItem("username");

console.log(username);

Output

JohnDoe

 

Removing Data

If we want to delete specific item from LocalStorage, we use removeItem() method:

localStorage.removeItem("username");

 

Also read about JavaScript Form Validation

 

Clearing All Data

If we want to clear all stored data from LocalStorage, we use clear() method:

localStorage.clear();

 

Storing Objects

LocalStorage only supports strings, but you can store objects using JSON.stringify() and retrieve them with JSON.parse():

Example of set data

let user = { name: "John", age: 30 };

localStorage.setItem("user", JSON.stringify(user));

 

Example of get data

let retrievedUser = JSON.parse(localStorage.getItem("user"));

console.log(retrievedUser.name);

Output

John

 

Use Cases of LocalStorage

1. Storing User Preferences

LocalStorage basically usefull to store user settings like theme, page layout, language preference etc.

localStorage.setItem("theme", "dark");

let theme = localStorage.getItem("theme");

document.body.className = theme;

 

2. Caching Data for Performance Optimization

LocalStorage can be used to cache API responses, reducing unnecessary network requests.

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => {
        localStorage.setItem("apiData", JSON.stringify(data));
    });

 

3. Shopping Cart Persistence

LocalStorage is very usefull for E-commerce websites to store cart related data to use across sessions.

let cart = [{ id: 1, name: "Laptop", price: 1200 }];

localStorage.setItem("cart", JSON.stringify(cart));

 

LocalStorage Limitation

  • Limited Storage Capacity: As we know, it saves data around 5MB per domain. So, it will not helpful for large datasets.
  • Synchronous Operations: As we know it is synchronous. So, large read/write operations can block the main thread.
  • Security Concerns: We can access stored data using JavaScript. So, its not secured from XSS (Cross-Site Scripting) attacks.
  • No Server: Side Synchronization: LocalStorage data, in compare to cookies, is not transmitted to the server with requests.

 

LocalStorage Best Practices

  • Do Not Store Sensitive Data: Always avoid storing sensitive user data like passwords or authentication tokens.
  • Use JSON for Complex Data: Convert objects into JSON format before storing them.
  • Implement Expiry Mechanism: LocalStorage does not have a built-in expiration mechanism, so implement manual expiration.

 

Example to set session expiry

let now = new Date().getTime();
let data = { value: "sessionData", expiry: now + 3600000 };
localStorage.setItem("session", JSON.stringify(data));

Example to get & check session expiry

let storedData = JSON.parse(localStorage.getItem("session"));
if (storedData && new Date().getTime() > storedData.expiry) 
{
    localStorage.removeItem("session");
}

 

Note: If LocalStorage is unavailable, use cookies or IndexedDB as alternatives.

 

Conclusion

A strong tool for storing persistent client-side data is JavaScript LocalStorage. It works well for storing non-sensitive data, such as shopping cart information, cached API answers, and user preferences. Its drawbacks, such as synchronous operations and security issues, should be properly addressed. Developers may efficiently use LocalStorage to improve web applications without sacrificing security or performance by adhering to standard practices.

Recent Post

Top