Skip to content
Related Articles

Related Articles

HTML | DOM Window localStorage Properties
  • Last Updated : 26 Jul, 2019
GeeksforGeeks - Summer Carnival Banner

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.

Syntax:

    window.localStorage
  • 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");

Example-1: Save, Read and Remove data to localStorage




<!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:

  • Before saving data:
  • After saving data:

      Example-2: Check storage type and save data.




      <!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
      • Internet Explorer
      • Firefox
      • Opera
      • Safari

      full-stack-img

      My Personal Notes arrow_drop_up
Recommended Articles
Page :