The localStorage object

The local storage is similar to session storage except it stores data with no expiration date. The data is stored locally and can be restored even after the browser is closed or system is turned off. This type of DOM storage is suitable for applications such as page view counter, to-do lists for the user, etc...

The example below shows a simple application of displaying a welcome message. If the user types a welcome message, every time the screen is loaded it is displayed. When there is a change in the message, the changed message is stored and retrieved. The first time since the user has not given the display message as input, the pop up message displays null. Once it is entered the message is stored and displayed.

Example of localStorage object

<!DOCTYPE html>
<html>

<body onload='alert(localStorage.getItem("userName"))'>
    <form>
        Enter welcome message <input type="text" id="name">
        <button onclick='(localStorage.getItem("userName"))'>Click to see welcome message</button>
        <p>Once stored the welcome message pops up every time the page loads.</p>
    </form>
    <script>			
        if(window.localStorage){
           var input=document.getElementById("name");
           if(localStorage.getItem("userName")){
            input.value = localStorage.getItem("userName");
           }					
           input.addEventListener("change", function(){
            localStorage.setItem("userName", input.value);
           });
         } 			
    </script>
</body>

</html>

›› go to examples ››

The localStorage object

Example of localStorage object

Comments

About

Contact

Get Connected