HTML5 Session Storage

localstoragebefore

In yesterday’s post, I spoke of HTML5 Local Storage. Today, I would like to touch on HTML5 Session Storage. This will be a short post as session storage works a lot like local storage with one very large distinction…the persistence of the data.

With local storage, as you saw in my last post, the data survives to be accessed and utilized at a later browser session. Session storage is just the opposite. Any data that is stored in session storage “dies” after the browser session is complete. So how do we use Session Storage?

We will use the same code that we used for local storage…the HTML…

<!-- HTML to demonstrate HTML5 Local Storage --> 
<p>
     <!-- Button to click that will invoke our counter function. -->
     <button onclick="clickCounter()" type="button">Click me!</button>
 </p> 
<!-- Div that will hold the result of clicking the counter button. --> 
<div id="result"></div> 
<!-- Instructions. --> 
<p>Click the button to see the counter increase.</p> 
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

Now for the JavaScript…

// Function demonstrate utilization of session storage 
    function clickCounter() {
         // Test whether browser has HTML5 storage capability
         if (typeof (Storage) !== "undefined") {
             // Test to see if there is an HTML5 session storage variable key called clickcount
             if (sessionStorage.clickcount) {
                 // Since the storage variable exists, let's add one to the value and store it back in the session storage variable
                 // We are running the variable through the number function to ensure it is an integer
                 sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
             } else {
                 // The clickcount session storage variable does not exist, so we create it.
                 // This should only run the first time we run the program.
                 sessionStorage.clickcount = 1;
             }
             // Grab our result div and display the results pulled from session storage
             document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s).";
         } else {
             // Display a message if the browser does not support HTML5 storage
             document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
         }
     }

Here is the beginning screen shot (it is the same as before)…

localstoragebefore

Here is a screen shot of the clicks in action…

localstorageafter

So, again, the big difference is that the counter data would “die” after closing the browser.

Happy Coding!

Clay Hess

HTML5 Local Storage

HTML5 Local Storage Before

In a previous post, I wrote of the advantages of HTML5 storage. In today’s post, I want to give an example of HTML5 local storage.

First let’s create the HTML…

<!-- HTML to demonstrate HTML5 Local Storage --> 
<p>
     <!-- Button to click that will invoke our counter function. -->
     <button onclick="clickCounter()" type="button">Click me!</button> 
</p> 
<!-- Div that will hold the result of clicking the counter button. --> 
<div id="result"></div>
<!-- Instructions. --> 
<p>Click the button to see the counter increase.</p> 
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

So to set the stage, we have an HTML button that once clicked, will invoke a function called clickCounter(). Let’s take a look at what clickCounter() does…

// Function demonstrate utilization of local storage 
    function clickCounter() {
         // Test whether browser has HTML5 storage capability
         if (typeof (Storage) !== "undefined") {
             // Test to see if there is an HTML5 local storage variable key called clickcount
             if (localStorage.clickcount) {
                 // Since the storage variable exists, let's add one to the value and store it back in the local storage variable
                 // We are running the variable through the number funtion to ensure it is an integer
                 localStorage.clickcount = Number(localStorage.clickcount) + 1;
             } else {
                 // The clickcount local storage variable does not exist, so we create it.
                 // This should only run the first time we run the program.
                 localStorage.clickcount = 1;
             }
             // Grab our result div and display the results pulled from local storage
             document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
         } else {
             // Display a message if the browser does not support HTML5 storage
             document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
         }
     }

In the aforementioned code, we are testing for the availability of HTML5 storage. Next, we are checking to see if our variable exists in local storage. If it does, we add one to the value, otherwise, we create it.

Here are before and after screenshots…

HTML5 Local Storage Before

HTML5 Local Storage After

Further, with HTML5 Local Storage, the variable values are saved from session to session. So if you close your browser, come back in and click the button, the count will pick up from where it last left off.

Happy Coding!

Clay

Storage Wars?

In a previous post, I mentioned HTML5 storage. I then went on to talk about cookies. I mentioned that I have gone away from using cookies to using HTML5 storage. It is not that cookies are bad, but HTML5 storage is so much easier and has advantages that I like better than cookies. So what are some of those advantages?

  • More secure
  • Faster
  • Not included in every server request (makes app faster)
  • Store larger amounts of data
  • Data is stored in key/value pairs…easier for programming

There are two types of HTML5 storage…

  • Local – lasts beyond the current browser session
  • Session – goes away once the current browser session is over

Note: While all modern browsers use HTML5 storage, it is probably a good idea (depending on what environments you are supporting) to test for HTML5 storage capability. So how do we do that?

If(typeof(Storage) !== "undefined"){
     // We can use HTML5 storage because it is not undefined 
}

So how do we use storage?

// Example of storing a last name in HTML5 local storage 
localStorage.lastname = "Doe"

So, we now have the last name of “Doe” stored in an HTML5 local storage variable entitled, ‘lastname’. So how do we retrieve it? We can use dot object notation…

// This code will pull the last name of 'Doe' from storage and alert it 
alert(localStorage.lastname);

This has been simply an introduction to HTML5 storage. I will be doing further posts giving other examples.

Happy Coding!

Clay Hess