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.

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

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!