PageResource.com - Web Development Tutorials

Local and Session Storage API

These days many websites like Amazon.com offer their users tailored purchasing recommendations. They are able to do so because they retain some information about the user’s behavior on their site. This information is typically stored as a web cookie. However, cookies have several limitations. Each one can only hold small amounts of information. Using too many of them can slow things down because of the way they are set up to work.

The Web Storage API, introduces new storage objects that work much better than cookies, and offer better features. In this tutorial we will look at a very simple implementation of the two storage objects sessionStorage and localstorage.

         -> See live Local Storage Example and Session Storage Example

Session Storage

The sessionStorage object stores information from a single session. The information is lost when the users ends the session by closing the window.

We will create a page where a user will be asked to enter their mother’s first name.  When information is submitted, the information will be store in session storage. A recall button will allow the user to retrieve the information.

Here is our html.

<p> What is your Mom’s first name? </p>

<form name= "myForm">

<input type= "text" name= "MomName" />

<input type= "submit" onclick= "OnSubmit()" />

<input type= "button" id= "sendbttn"  value= "Recall" onclick= "show_alert()" />

</form>

 

Here is the script to make it work:

<script>

//This function is triggered when the user clicks the Submit button

function OnSubmit() {

var mom = document.myForm.MomName.value; //captures the name the user enters

sessionStorage.firstname = mom; //passes the value to the session storage object

}

//This function is triggered when the user clicks the Recall button

function show_alert() {

alert(sessionStorage.firstname); //returns the value stored in the session storage

}

</script>

 

Now let us look at this example in the browser. We will start by entering the name “Elizabeth” in the input field.

 

Next, click the Submit button. Now when you click the Recall button, the browser will popup the name you entered.

 

 

Because the sessionStorage object only stores information for a given session, the information will be lost when the window is closed. We can see this in our example. Close the browser and reopen the page in another session. Now click the Recall button, before entering a name. Instead of returning the name you entered before closing the session, the browser will give you an error message.

 

 

Local Storage

The localStorage object can technically retain information forever, until it is specifically removed. The information in localStorage can be retrieved even after the session ends. Let us look at the example to see how it works.

We will use the same html as earlier, asking the user to enter their mother’s first name. But we will change our script. We will replace the sessionStorage object with the localStorage object.

 

<script>

//This function is triggered when the user clicks the Submit button

function OnSubmit() {

var mom = document.myForm.MomName.value; //captures the name the user enters

localStorage.firstname = mom; //passes the value to the local storage object

}

//This function is triggered when the user clicks the Recall button

function show_alert() {

alert(localStorage.firstname); //returns the value stored in the local storage

}

</script>

 

Now, let us look at the example in the browser. This time let us enter the name “Ruth.”

 

Just like in the earlier example, when you click the Recall button, after clicking the Submit button, it returns the name.

 

 

However, unlike the session storage example, the information entered will not be lost if we close the sessions. This is because the browser will retain the information stored in localStorage, even if you close the window. So, go ahead and close the window. Then reopen the page in another window. Now click the Recall button before entering another name in the input field. As you will see, the browser will return the name entered in the previous session.

 

         -> See live Local Storage Example and Session Storage Example

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy