Saturday, March 16, 2013

Store data locally with HTML5 Web Storage

Now new version of HTML5 having number of new API one of the is Storage API, which allow you to store data of use locally. Here in following post I am going to describe Storage API.

Cookies vs. Storage
In previous version of HTML allows to store data locally with the help of Cookies but the
  •  issue with the cookies is its not allow to big object and which can be easily done. Storage allows 5M (most browsers) or 10M (IE) of memory at disposal. 
  • Another problem is cookies get sent to server with each HTTP request which in term increases traffic.
Now lets start using the store in application
  alert("storage is supported and you can store data in it"); 
 alert("Get new version of browser or use browser which support storage");
So here in above as you can see, first line of code check weather browser supports/have Storage object. It's good to check because most of the older browser is not supporting and as its new feature its mostly supported in new browsers.

After doing check for Storage support decide either you want to store data for given session only or want to store data which available even after session is over and when user come back.
So there are two type of object which is explained below
  • sessionStorage is used to store within the browser tab or window session. so it allows to store data in a single web page session.
  • localStorage is used to kept even between browser sessions. so it allows to access data after the browser is closed and reopened again, and also instantly between tabs and windows.
Note : Storage data created by one browser is not avaible in other browser. for example created in IE is not available in FireFox.

Following is the way you can use the localStorage and sessionStorage in your application.
//set and get object 
sessionStorage.setItem('myKey', 'myValue');
var myVar = sessionStorage.getItem('myKey');
//another way to set and get 
sessionStorage.myKey = 'myValue';
var myVar = sessionStorage.myKey;

//remove item

//clear storage 
//set and get object 
localStorage.setItem('myKey', 'myValue');
var myVar = localStorage.getItem('myKey');
//another way to set and get 
localStorage.myKey = 'myValue';
var myVar = localStorage.myKey;

//remove item

//clear storage 
as in the above code both of the object support same set of methods to store and retrieve data.
  • setItem - allows to set value. 
  • getItem - allows to get value.
  • removeItem - allows to remove object from storage. Note: if it used like removeItem(), it removes all stored object , so be careful when removing -to remove specific object use removeItem("myKey"). 
  • clear - clear storage i.e. clear all stored data.
and as you can see storage store data in key value pair.

Web Storage simplify the storing of object in client and also have advantage over cookies, but its always good to not store sensitive information in the client side storage as storage is not provide that much security.

Thanks for reading and do post comment if you like it or something is missing or wrong.


  1. This is my first time visit at here and i am really impressed to read
    all at alone place.

    Feel free to surf to my web site;

  2. Wonderful website. Lots of uѕeful informatiоn here.
    I'm sending it to some buddies ans also sharing in delicious. And of course, thank you for your effort!

  3. Of course, there's always an element of the farmacia on line launch, it was developed to help men achieve and maintain an erection. Once the wife is pregnant, farmacia on line will take effect if some stimulation is in order.

    my web blog -

  4. Very good post! We will be linking to this particularly
    great post on our site. Keep up the good writing.

    Also visit my website: wechsel private krankenversicherung in gesetzliche

  5. I just like the valuable information you provide to your articles.
    I will bookmark your weblog and take a look at once more here frequently.
    I am fairly sure I'll be told many new stuff proper here! Good luck for the next!

    my weblog: seo expert kolkata

  6. I just like the valuable information you supply for your articles.
    I will bookmark your weblog and check once more here frequently.
    I'm moderately sure I will be told plenty of new stuff right here! Best of luck for the following!

    Feel free to surf to my page Enduros Male Enhancement

  7. It's very straightforward to find out any matter on web as compared to books, as I found this article at this web site.

    my weblog - Pureberry Max Reviews

  8. Appreciating the time and energy you put into your website and detailed information
    you offer. It's good to come across a blog every once in a while that isn't the same unwanted rehashed information.
    Excellent read! I've saved your site and I'm adding
    your RSS feeds to my Google account.

    Visit my web blog

  9. Μаny thanks. The PCC is a top pгioгity аnd therе have
    bеen ѕome exciting imρrovementѕ the past few nightѕ.
    Wе're certainly getting closer.

    Stop by my website green smoke promo code

  10. I am in fact delighted to glance at this webpage posts which carries tons of
    helpful facts, thanks for providing these data.

    Also visit my homepage ... college student loan

  11. This amendment also prohibits coverage of farmacia on line for any other marketing purpose.
    For a phone which uses touch input as its main vehicle
    for navigation, in addition to the capacitive buttons, anyway.

    My webpage ... viagra

  12. I know this site presents quality dependent posts and other information, is there any other web site which gives these
    information in quality?

    my blog post :: Lowest rates for home equity loans

  13. I always used to study paragraph in news papers but now as I am
    a user of net so from now I am using net for articles or
    reviews, thanks to web.

    Also visit my weblog; google adsense Alternative

  14. Ηі there! I just wanted to aѕk іf you evеr hаve any іѕѕues ωith hackегs?
    My last blog (ωoгdpress) was haсked
    anԁ I ended up loѕing sevеral weekѕ of
    hаrd work duе to no bаckup. Do yоu haѵe any ѕolutions tο stop hаcκers?

    lose pregnancy weight

  15. Very gοοd artiсle! We are lіnking tо thiѕ pаrticularly greаt aгtiсle on οur ωеbsіtе.
    Кеep up thе great wrіting. simply click the up coming document

  16. Havіng гead this I bеlieveԁ it ωas veгy infoгmаtive.
    I aрprecіate you taking the timе аnd еffort to put this article together.
    Ӏ oncе аgain find myѕеlf peгsonаlly spending waу too much tіme
    bοth reading and commеnting. But ѕο what,
    it ωas still worthwhilе!

    my ωebsite :: hcg weight loss cure guide

  17. Wow that was strange. I just wrote an very long comment but after I clicked submit my comment didn't show up. Grrrr... well I'm
    not writing all that over again. Anyhow, just
    wanted to say fantastic blog!

    My webpage 0

  18. When someone writes an article he/she retains the plan
    of a user in his/her mind that how a user can know it.
    So that's why this article is great. Thanks!

    My web-site ... Weight loss supplement

  19. Oh my goodness! Incredible article dude! Thanks, However I am having difficulties with your RSS.
    I don't understand why I can't join it. Is there anyone else having identical RSS problems?
    Anyone that knows the answer can you kindly respond? Thanks!

    Here is my web-site :: Burn fat

  20. I'm really loving the theme/design of your site. Do you ever run into any internet browser compatibility problems? A handful of my blog audience have complained about my site not working correctly in Explorer but looks great in Opera. Do you have any solutions to help fix this problem?

    Also visit my web blog ... Test Force Xtreme

  21. Hello, i read your blog occasionally and i own a similar one and i was just curious
    if you get a lot of spam remarks? If so how do you stop it,
    any plugin or anything you can recommend? I get so much lately it's driving me mad so any assistance is very much appreciated.

    Also visit my site: where can i buy quantrim

  22. All very good news for photographers because there are several large species of ants in paphos car hire.
    On the other hand, the enlarged panel really makes your daily smartphone tasks so much easier or even more.

    Here is my weblog;

  23. If some one wants expert view regarding blogging afterward i recommend him/her
    to go to see this blog, Keep up the nice work.

    Also visit my web blog ... Louis Vuitton Handbags Outlet

  24. These are actually impressive ideas in concerning blogging.
    You have touched some nice points here. Any way keep up wrinting.

    Review my homepage - work from home

  25. A fascinating discussion is definitely worth comment.
    I do believe that you should publish more on this topic, it may not be a taboo matter but usually people do not talk
    about such issues. To the next! Kind regards!!

    Feel free to surf to my web-site :: Kiteash6.Webgarden.Com