Home > HTML5 > HTML5 Web Storage API Example

HTML5 Web Storage API Example


In my earlier post I explained basic concepts of Local Storage API.If you are new it’s better to refer Understanding Local Storage API in HTML5.

Before writing web pages in html5 you need to think about two things.

  • Browser compatibility:- You can check browser compatibility using html5test.com. Right now Chrome is leading with 437points(out of 500) and next Maxthon,Opera,Safari,Mozilla and finally as you expected IE9 with 137points.IE 10 is under development which supports html5 features up to 319points.
  • What if the browser wont support? some of the browsers wont support new html5 features in that case we need to provide meaningful alternative.
  • And check whether feature is supported by browser or not for web storage you can use window[“localstorage”]
But the good news is that all the browsers(even the mobile browser you can check all these details in html5test.com) are moving towards the HTML5 standards.And HTML5 is not declared as standard by W3c right now(Expected to be stable standard by 2014) May be w3c will come up with proper solution to support the older browser(it’s depends on how fast users upgrading their browser).


Now I will explain how to use Web Storage API to save user preferences in client browser especially in eCommerce sites.Usually most of the eCommerce sites save user search preferences using cookies.When the user loads page for the next time browser will send cookie along with http request and displays the search preferences.But we can use web storage Api to do the same effectively (without much complexity).


Multi Search using Web Storage API:
This is the Sample HTML file for Multi Search functionality.
  • One text box for entering search items
  • One button for adding search items to local storage as well as DOM
  • One button for clearing local storage and DOM elements
  • And one list for showing search items.



JavaScript Code:-


The following are the main functions in Java Script
  • Adding search items to LocalStorage
  • Adding search items to DOM
  • Getting existing Search Item list from local storage.
  • Deleting search Items.
Adding search Item to Local Storage:-
 Local storage api is all about key/value pairs.Creating unique keys are the main important thing in this Local storage.Here I am using Date function to create unique keys.First I am creating unique items and then I am pushing those items into another array ‘searchItemsArray’.To access items easily.As the Local storage supports only string format Iam using JSON.stringify() to convert array to string and save it into localStorage, and JSON.parse() to parse string to array.


Getting existing search items from localstorage:-
After adding key into localstorage we need to get existing searchItemsArray,If searchItemsArray not existing (i.e., if we are loading page first time) we are creating an array and adding it into local storage else we are getting existing ‘searchItemsArray’


Adding search items to DOM:-
And finally we are reading each element in ‘searchItemsArray’ and adding it into DOM.


Deleting the search Items:-
And I added one button for clear all search Items and also if the user clicks on single element I am clearing that element using onClick method on ‘li’ element.




Arunkumar Gudelli
I am a Simple Guy, Standing Infront of the World, asking you to Follow Me. Don't miss any posts from Me,Subscribe to the RSS Feed. You can connect me via @twitter or @facebook or Google+ or e-mail.