This tutorial help to understand Local Storage with JavaScript. You can learn its advantages, and various methods to interact with it using JavaScript. The HTML5 Local storage data is available in the browser to all windows with the same.
Local storage is a powerful feature in JavaScript that allows you to save and retrieve data within the browser. It provides a way to store data locally on the user’s device, making it accessible across different windows or tabs.
I have already shared the tutorial Local Storage with Angularjs.
Introduction to Local Storage
Local storage is a part of the HTML5 web storage API, which includes two storage mechanisms:
- local storage: Local storage is used to store data that persists even after the browser window is closed.
- session storage: This storage is used to store data for a single session (which ends when the browser window is closed).
Here are some key points about local storage:
- Data stored in local storage remains available even after closing and reopening the browser. It’s accessible on all windows or tabs within the same browser.
- Cookies are sent by the server to the browser, whereas local storage is sent by JavaScript to the browser.
- Local storage provides a larger storage capacity compared to cookies. While cookies are limited to 4KB in size, local storage has no such restriction.
Use Of Local Storage with JavaScript
Local storage is commonly used for storing non-sensitive data or temporary data that needs to persist across page reloads. Here are the steps to save and retrieve data using local storage:
We’ll cover the following local storage methods here,
- key()
- setItem()
- removeItem()
- getItem()
- clear()
Saving Data in Local Storage
You can save data in local storage using the setItem() method. This method takes two parameters: the key and the value to be stored. Here’s an example:
localStorage.setItem("name","Adam");
In the above code, we save the value “Adam” with the key “name” in the local storage.
Saving Object in Local Storage
You can also store JSON objects in the local storage against a key:
const Employee = {
name:"Adam",
age: 24,
salary:1234
}
localStorage.setItem('emp', JSON.stringify(Employee));
The JSON.stringify() method converts a JavaScript object or value to a JSON string.
Retrieving Data from Local storage
To retrieve data from local storage, you can use the getItem() method. This method takes the key as a parameter and returns the corresponding value. Here’s an example:
var name = localStorage.getItem("name");
console.log(name); // Output: Adam
The getItem() method retrieves the value associated with the key “name” and assigns it to the name variable.
Removing Data from Local storage
If you want to remove a specific item from local storage, you can use the removeItem() method. This method takes the key as a parameter and removes the corresponding item. Here’s an example:
localStorage.removeItem("name");
In the above code, we remove the item with the key “name” from the local storage.
Clearing Data from Local storage
If you want to remove all items from local storage, you can use the clear() method. This method clears all data stored in the local storage. Here’s an example:
localStorage.clear();
The clear() method removes all items from the local storage, leaving it empty.
Local storage key() Method
This method retrieves a value or string from a specified location. You can pass an index as a parameter to the key() function. Here’s an example:
var data = localStorage.key(0);
The code above retrieves the value of the first item from the local storage.
Conclusions
In this tutorial, we have explored various local storage functionalities using different methods. Local storage is a useful tool when you need to temporarily store data and delete the local storage object after the process is complete.
