HTML DOM Window localStorage Properties

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:

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:

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

HTML DOM Window localStorage Properties

Explore