Introduction
In this Blog, we will cover LocalStorage in JavaScript.
LocalStorage
HTML5 specification introduces the localstorage as a way to store data with no expiration date in the web browsers.
- In other words, the data stored in the browsers will persist even after you close the browser windows.
- The data stored in the localStorage is bound to an origin. It means that the localStorage is unique per "protocal://host:port".
- If you wish to store objects, lists, or arrays, you must convert them into a string using JSON.stringify().
Accessing LocalStorage
You can access the localStorage via the property of the window object.
Example
window.localStorage
![window.localStorage]()
LocalStorage Methods
LocalStorage provides some methods and properties.
setItem(key, value)
- This method i used to store a name-value pair in the localStorage.
- As mentioned before, we must stringify objects before we store them in the local storage.
localStorage.setItem("theme","Dark");
const Employee = {
name: "Vishal Yelve",
phone: 12345
}
localStorage.setItem('employee', JSON.stringify(Employee));
![localStorage.setItem()]()
getItem(key)
- This method is used to access or retrieve data from the localStorage. A key is used as a parameter.
- You should convert it to an object using JSON.parse() to use it in your code
const employee = localStorage.getItem('employee');
// {"name":"Vishal Yelve","phone":12345}
const employeeJson = JSON.parse(localStorage.getItem('employee'));
// {name: 'Vishal Yelve', phone: 12345}
![localStorage.getItem()]()
removeItem(key)
This method is used to delete an item from localStorage. A key is used as a parameter.
localStorage.removeItem('them')
![localStorage.removeItem()]()
key(index)
This method retrieves a value from a specific location. The index can be passed as a parameter.
let answer = localStorage.key(3);
// this statement will retrieve the value of the third item from the localStorage
![localStorage.key()]()
clear()
This method is used to clear all values stored in local storage.
localStorage.clear()
![localStorage.clear()]()
length
This property is used to get the number of name-value pairs from localStorage.
console.log(localStorage.length)
// 2
![localStorage.length]()
Loop Over keys
The following stores three name-value pairs to the localStorage.
localStorage.setItem('theme','light');
localStorage.setItem('backgroundColor','white');
localStorage.setItem('color','#111');
![name-value]()
To iterate over name-value pairs stored in the localStorage, you use to Object.keys() method with for..of the loop.
let keys = Object.keys(localStorage);
for (let key of keys) {
console.log(`${key}: ${localStorage.getItem(key)}`);
}
![for loop]()
- You are now familiar with the different functionalities of localStorage.
- The major methods in local storage are setItem, getItem, removeItem, and clear.
- A key is required when storing, retrieving, and removing items from the localStorage.
- As always, I hope you enjoyed the past and learned something new.
Summary
In this blog, here we tried to understand about localStorage in JavaScript.