Constant Contact Labs Developer Blog

• HTML5 Web Storage Posted Monday, July 12, 2010 Seth Wieder 0 Comments

  An introduction to HTML5’s recently implemented client side storage. Including a brief synopsis on the three different mechanisms: sessionStorage, localStorage, and databaseStorage.

  Web developers have always been using client-side storage. Locally stored information allows sites to authenticate, store site preferences, remember shopping cart contents, or identify a server-based session. Reading directly from the client's hard-drive reduces load on the server, enhances responsiveness and increases accessibility. The most popular method for local storage in all browsers is in HTTP cookies. Cookies are pairs of strings that are stored in a text file on a user's computer and are sent to the server with the same domain name. Individual browsers then made their own specific or plugin-dependent methods. Internet Explorer made userData, Mozilla uses Google Gears, and even Adobe got into the mix with Local Shared Objects. It was chaotic and a mess for any web developer. However, in an attempt to consolidate and standardize client-size storage, HTML5 came up with a well structured storage solution. Client side storage was divided into 3 approaches.
  

  Session Storage

  
  

  This type of Client side storage is most like the HTTP cookies were are familiar with. However, there are additional benefits to session storage. Cookies are limited to only 4 kb of space, and this can be limiting. Session storage allows much more space. Cookies also are sent with every request to the server. Session data is not sent every time and this can reduce server payload.  Session storage is only tied to the individual tab it was created in, rather than an entire browser session. This could be beneficial if two users want to shop from the same site on two windows. However, session storage data will be lost when the browser window closes.

  Local Storage

  
  

  Local storage is similar to session storage, but it differs in persistence and scope. Local storage data is not confined to the browser window that it was created in. It will contain the same key-value pair and be accessible across all browser windows. Local storage data is also more persistent. Its data exists and is stored indefinitely even after the window is closed. The key and value names are both completely customizable.  Local storage can even support pushed arrays or objects with JSON.stringify

  Database Storage

  
  

  Until now, we have been limited to key-value pairs. But when you are dealing with a larger amount of web data, database is the option for you. With HTML5 you get database storage, which allows you to save structed data in the client's machine using a real SQL database. Browsers that have implemented this feature use SQLite database which is light and fast but has a few limitations. Also, database storage is currently the least implemented and supported client storage method.

  Although still being developed and implemented client side storage has seen a jump in the right direction. HTML5 consolidated and standardized client storage with three useful methods, each useful in their own circumstance. For more information, check out this link

   

  The opinions expressed here represent those of the author and not those of Constant Contact, Inc. Read Blog Terms

  Share

  | More

  Tags

  Next Post Previous Post

   

Comments +comment on this post

 

Add your comment below