HTML DOM Window localStorage Properties allow you to store value pairs in web browsers using objects. It is a read-only
property. This object is not expired even if the browser is closed. So, the data is never lost.
Return Values: It returns  a Storage object.
Syntax:
-
SAVING data to localStorage using:
localStorage.setItem("key", "value");
-
READING data from localStorage using:
var name = localStorage.getItem("key");
-
REMOVING data from localStorage using:
localStorage.removeItem("key");
Example1: This example describes the Save, Read and Remove data to localStorage.
HTML
<!DOCTYPE html>
<html>
<head>
<title> HTML DOM Window localStorage Properties </title>
<script>
//Saving data locally
function save() {
var fieldValue = document.getElementById('textfield').value;
localStorage.setItem('text', fieldValue);
}
// Reading data
function get() {
var storedValue = localStorage.getItem('text');
if(storedValue) {
document.getElementById('textfield').value = storedValue;
}
}
// Removing stored data
function remove() {
document.getElementById('textfield').value = '';
localStorage.removeItem('text');
}
</script>
</head>
<body onload="get()">
<p1>
Type something in the text field and
It will Get stored locally by Browser
</p1>
<input type="text" id="textfield" />
<input type="button" value="save" onclick="save()" />
<input type="button" value="clear" onclick="remove()" />
<p2>
when you reopen or reload this page,
your text is still there.
</p2>
<p3>
<br>click on clear to remove it.</p3>
</body>
</html>
|
Output:
Window localStorage
Example 2: This example describes the check storage type and saves data.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window localStorage Properties</title>
</head>
<body>
<div id="SHOW"></div>
<script>
if(typeof(Storage) !== "undefined") {
localStorage.setItem("name", "GeeksforGeeks");
document.getElementById("SHOW").innerHTML =
localStorage.getItem("name");
} else {
document.getElementById("SHOW").innerHTML =
"YOUR BROWSER DOES NOT" + "SUPPORT LOCALSTORAGE PROPERTY";
}
</script>
</body>
</html>
|
Output:
Window localStorage Property
Supported Browsers: The browser supported by DOM Window localStorage are listed below:
- Google Chrome 4.0
- Internet Explorer 8.0
- Microsoft Edge 12.0
- Firefox 3.5
- Opera 10.5
- Safari 4.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!