Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

HTML5, Sessions and LocalStorage... Hoorah!

HTML5 Tip: Using localStorage to Retain Form Data when Sessions Expire

Most of the websites I design have a pretty nifty Content Management System which allows my clients to edit a majority of their website content. One of the biggest problems I've been trying to address over the past few years has been the short session limit on some of the shared hosting plans we use. It seems like the ISP's only allow a maximum of 30 minutes when using session management. 90% of the time, this is fine, but if my client is in the middle of an edit and then takes a phone call or leaves the computer, it's possible the session will expire and then they will lose the form data they had entered.

I've tried various ways of fixing this issue over the years, but none of them seemed to work well. The hacks were typically so complicated that whenever I needed to customize a portion of the CMS manager, it wound up breaking my hack. I wound up telling my clients before a site launch tabout the limitation and to be careful when making edits. Not the ideal situation.

When the HTML5 draft was released one of the new features really caught my attention. And that was the "localStorage" feature. Below is my first attempt at adressing the session expiration problems. This is pretty new stuff for me, and to be honest, I'm not an expert. This is my first attempt and it hasn't thoroughly been field tested. These functions were designed to work with jQuery, but could easily be modified to work without it. I'll leave that up to you.

Functions


function getStorage() {
   var storage;
   if (!window["Storage"]) {
      return;
   } else {
      storage = window["localStorage"];
      $(storage).each(function(a){
         var id = storage.key(a);
         if ($("#" + id).length > 0) {
            $("#" + id).val(storage.getItem(id));
         }
      });
   }
}

$(function () {
   $(document).ready(function () {
      /* initialize our form fields */
      $("input,textarea,select").live("keyup change", function () {
         if ($(this).attr("id").length > 0) {
           localStorage.setItem($(this).attr("id"), $(this).val());
         }
      });
      /* clear form storage on submit */
      $("form").live("submit", function() {
         localStorage.clear();
      });
      /* retrieve and set previous stored data */
      getStorage();
   });
});

What's Going On

To use, you would want to place this chunk of code on any page that has form data in which you would like to store. Be sure to place it after loading jQuery.

The function getStorage, reads in any stored data and searches for a DOM object with an ID that equals the storage KEY name. If it finds one, then it will attempt to set it's value to the stored KEY value.

The next block of code, waits for the document to load and the sets up storage on all of the INPUTS, TEXTAREA and SELECTS. It will store data everytime the KEYUP and CHANGE events fire. We then set up any forms to clear the localStorage on SUBMIT. And finally, we call out getStorage function.

All in all, it's fairly straight forward. I strive to keep things simple, but as always there's bound to be problems with this. As I've used it a little more, I'll be sure to post a follow-up, but in the meantime, enjoy! If you have any improvements, please let me know down below.