JavaScript localStorage

JavaScript localStorage is a feature that lets you store data in your browser using key-value pairs. The data stays saved even after you close the browser, so it can be used again when you open it later. This helps keep track of things like user preferences or state across different sessions.

Syntax

ourStorage = window.localStorage;

The above will return a storage object that can be used to access the current origin's local storage space.

Key Features of localStorage

• Origin-Bound Storage: Data is stored per domain and is not shared across different origins.
• Persistent Storage: Data remains intact even if the browser is closed or the operating system is rebooted. It will be available until manually cleared.
• Storage Limit: Storage Limit: The storage limit for cookies is 4KB, which is much smaller compared to the 5MB limit for localStorage.
• No Automatic Transmission: Unlike cookies, localStorage data is not sent with every HTTP request, making it a more efficient option for client-side storage.

Basic Operations with localStorage

localStorage has a simple API that allows you to interact with the browser’s local storage. The basic operations include storing, retrieving, updating, and removing items from the storage.

1. Storing Data in localStorage

To store data in localStorage, use the setItem() method. This method accepts two arguments:

• The key (a string), which is the identifier for the stored data.
• The value (also a string), which is the data you want to store.

Syntax:

localStorage.setItem('key', 'value');

2. Retrieving Data from localStorage

To retrieve the data you stored, use the getItem() method. This method takes the key as an argument and returns the associated value. If the key does not exist, it returns null.

Syntax:

let value = localStorage.getItem('key');

3. Removing Data from localStorage

To remove a specific item from localStorage, use the removeItem() method. This method accepts the key of the item you want to remove.

Syntax:

localStorage.removeItem('key');

4. Clearing All Data in localStorage

If you want to clear all data stored in localStorage, use the clear() method. This will remove all key-value pairs stored in the localStorage for the current domain.

Syntax:

localStorage.clear();

5. Checking if a Key Exists in localStorage

You can check if a key exists in localStorage by using getItem(). If the key doesn’t exist, getItem() will return null.

if (localStorage.getItem('username') !== null) {
 console.log('Username exists in localStorage');
} else {
 console.log('Username does not exist in localStorage');
}

Example: Using localStorage

This example demonstrates using localStorage to store, update, retrieve, and delete key/value pairs in the browser. It shows setting items, updating them, retrieving data by key, checking stored items count, and clearing the storage.

In this Example:

• The code saves the values "GeeksforGeeks" and "green" to localStorage under the keys "name" and "color" respectively.
• It then updates these values by changing the "name" to "GeeksforGeeks(GfG)" and the "color" to "blue".
• The code retrieves the stored values for "name" and "color" from localStorage and logs them to the console.
• It checks which key is stored at position 1 using localStorage.key(1) and logs it.
• The number of items currently stored in localStorage is calculated using localStorage.length and logged to the console.
• The "color" item is removed from localStorage and the remaining item count is displayed. After that, all stored items are cleared using localStorage.clear().

Output: 

👁 Image

Now, follow the below given steps for performing the basic operations of localStorage:

• Open your web page in the browser.
• Right-click and select "Inspect" or press Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).
• Go to the "Application" tab.
• In the left-hand menu, under "Storage," select "Local Storage."
• Saving data as key/value pair

👁 Image

Updating data 

👁 Image

Get data, index of a key, and number of stored items

👁 Image

Remove a key with its value

👁 Image

Delete everything in storage

👁 Image

Storing Non-String Data

localStorage only stores data as strings. If you need to store objects, arrays, or other complex data types, you must convert them into a string format. You can use JSON.stringify() to convert an object into a JSON string, and JSON.parse() to convert it back into an object.

Example: Storing and Retrieving an Object

In this example:

• The object user is stored as a string using JSON.stringify().
• When retrieved, JSON.parse() is used to convert the string back into an object.

Properties and Methods of localStorage

Pros and Cons of Using localStorage

Pros:

• Persistence: Data stored in localStorage remains even after the browser is closed, which is useful for retaining user preferences and session data.
• Simple API: The API for using localStorage is straightforward and easy to use.
• Large Storage Capacity: localStorage allows you to store up to 5MB of data per domain in most browsers.
• No Server Interaction: Data is stored directly in the client’s browser, so it doesn’t require any server-side communication.

Cons:

• Security: Data stored in localStorage is not encrypted, making it vulnerable to cross-site scripting (XSS) attacks. Sensitive data like passwords or tokens should not be stored in localStorage.
• Synchronous: localStorage is a synchronous API, meaning it may block the main thread when storing or retrieving large amounts of data.
• Limited Capacity: The storage capacity (around 5MB) might not be enough for larger datasets.

Browser Support

window.localStorage is supported in the below given browsers:

Conclusion

localStorage is an effective tool for storing data persistently within the browser. It provides methods to easily set, retrieve, and manage data, ensuring it remains available across sessions until explicitly cleared. By understanding and utilizing localStorage, developers can enhance the user experience by maintaining state and preferences across browsing sessions.