In this guide, we will learn all the JavaScript localStorage object APIs/methods with an example.
The localStorage object is a type of web storage that allows Javascript websites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window has been closed. The localStorage property object is read-only.
In this guide, we will learn below all 5 localStorage object methods with example.
Check out JavaScript Posts, examples, and tutorials at JavaScript Tutorials, Articles, Examples.
The localStorage object is a type of web storage that allows Javascript websites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window has been closed. The localStorage property object is read-only.
In this guide, we will learn below all 5 localStorage object methods with example.
JavaScript LocalStorage APIs/Methods
To use LocalStorage in your web applications, there are 5 methods to choose from:
- setItem(): Add key and value to LocalStorage
- getItem(): Retrieve a value by the key from LocalStorage
- removeItem(): Remove an item by key from LocalStorage
- clear(): Clear all LocalStorage
- key(): Passed a number to retrieve nth key of a LocalStorage
Syntax
window.localStorage
The syntax for SAVING data to localStorage:
localStorage.setItem("key", "value");
The syntax for READING data from localStorage:
var lastname = localStorage.getItem("key");
The syntax for REMOVING data from localStorage:
localStorage.removeItem("key");
The syntax for CLEAR all data:
localStorage.clear();
Syntax for Key() Method:
var KeyName = localStorage.key(index);
Let's demonstrate each method with an example.
localStorage.setItem() API/Method
This method just as the name implies allows you to store values in the localStorage object.
It takes two parameters, a key, and a value. The key can be referenced later to fetch the value attached to it.
localStorage.setItem("firstName", "Ramesh");
Where "firstName" is the key and "Ramesh" is the value. Also, note that localStorage can only store strings.
To store arrays or objects you would have to convert them to strings.
To do this we use the JSON.stringify() method before passing to setItem() .
var user = {
firstName : "Ramesh",
lastName : "Fadatare"
}
localStorage.setItem("id", JSON.stringify(user));
localStorage.getItem() API/Method
The getItem() method allows you to access the data stored in the browser’s localStorage object.
It accepts only one parameter which is the key and returns the value as a string.
To retrieve the user object from the key stored above:
localStorage.getItem('id');
This returns a string with value as;
"{"firstName":"Ramesh","lastName":"Fadatare"}"
To use this value, you would have to convert it back to an object using JSON.parse() method.
JSON.parse(localStorage.getItem('id'));
localStorage.removeItem() API/Method
Let's use the removeItem() method to remove the item from the key. Let's remove the user object previously stored using setItem() method:
localStorage.removeItem('id');
localStorage.clear() API/Method
This method, when invoked clears the entire storage of all records for that domain. It does not receive any parameters.
localStorage.clear();
localStorage.key() API/Method
The key() method comes in handy in situations where you need to loop through keys and allows you to pass a number or index to local storage to retrieve the name of the key.
var KeyName = localStorage.key(index);
Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours
Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course