Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM Window localStorage Properties

  • Last Updated : 25 Nov, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :