Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to store objects in HTML5 localStorage?
In this tutorial, we will discuss how to store objects in HTML5 localStorage. We can access the Storage object and store data in it thanks to the interface window's localStorage property.
There is no time limit on it. As a result, the data that is stored in it will remain until it is explicitly deleted. The localStorage data can't be removed by closing the browser.
To store JavaScript objects in localStorage, we will investigate how to stringify and parse them into JSON strings and then how to store them in localStorage.
Using the setItem() Method
This setItem() method is used to store data in HTML5 localStorage. This method comes under the localStorage property of the window interface.
Syntax
window.localStorage.setItem(key, value);
Here, we have used two parameters in the method setItem(key, value). A key and Value. Let’s understand the parameters in detail.
Parameters
key − This is a distinct identifier of a value. It is possible later to obtain a value from localStorage using this distinct identifier.
value − This is the data/information that will be kept in localStorage.
Example 1
In this example, First, we are creating an object that we will store in localStorage named objectRegion. Afterward, we define two variables: a key and a value. Variable value contains the JSON format of the object. Then using setItem() we are setting this key and value pair to localStorage. Here we have also used the getItem() method, which will find value from the key provided. It returns the value corresponding to the key. Then we display it.
<html>
<body>
<h2> Add an Object to localStorage in HTML5 using setItem() method </h2>
<label> Object: </label>
<div id="get-object"> </div>
<script>
// Creating object
// this object will be saved to localhost
const objectRegion = {
Region: "Asia",
Country: "India"
}
// defining key and value
const key = "object";
const value = JSON.stringify(objectRegion)
// setting the key-value pair to localhost
window.localStorage.setItem(key, value);
// Getting the key-value pair using the getItem() method with the key attribute
// getItem() method is used to get the value from localStorage using key
let object = window.localStorage.getItem(key);
// Displaying the object.
let element = document.getElementById("get-object");
element.innerHTML = object;
</script>
</body>
</html>
Example 2
Here in this example, we can store an object in localStorage and retrieve it. We have the first two input text boxes through which we can store value to localStorage. And using the key, we can retrieve the value. If the key is not in localStorage, getItem () returns a null value.
<html>
<body>
<h2> Set the value to localStorage using setItem() method in an HTML5 </h2>
<p> Set the key-value pair to localStorage </p>
<label> Key: </label>
<input type="text" id="set-key">
<br> <br>
<label> Value: </label>
<input type="text" id="set-value">
<br> <br>
<input type="button" value="Set Key-Value" onclick="setKeyValue()">
<div id="set"> </div>
<p> Get the value from key </p>
<label> Enter Key: </label>
<input type="text" id="get-key">
<br> <br>
<div id="get-value"> </div>
<input type="button" value="Get Value" onclick="getValueFromKey()">
<div id="get"> </div>
<script>
// this function will Set Key-value pair to localStorage
function setKeyValue() {
// Getting the key-value pair from the input box
let key = document.getElementById("set-key").value;
let value = document.getElementById("set-value").value;
// Setting the key-value pair to localStorage
window.localStorage.setItem(key, JSON.stringify(value));
let text = "";
text += "<br>Key-Value set.<br> Try with key: ";
text += key;
text += " to get the value";
// Displaying the message
let element = document.getElementById("set");
element.innerHTML = text;
}
// This function will get value using the key from localStorage
function getValueFromKey() {
let key = document.getElementById("get-key").value;
// Getting the object value from localStorage with key using getItem() method
let value = window.localStorage.getItem(key);
let element = document.getElementById("get");
if (value != null) {
element.innerHTML = "<br> Value corresponding to key: " + key + " is: " + value;
} else {
element.innerHTML = "<br> Key is not in localStorage, try to set key-value pair first!";
}
}
</script>
</body>
</html>
In this tutorial, We have seen how to store objects in HTML5 in localStorage using the setItem() method.
1K+ Views
