Saturday, March 16, 2013

Store data locally with HTML5 Web Storage

Shout it kick it on DotNetKicks.com
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.
Storage
Now lets start using the store in application
if(typeof(Storage)!=="undefined")
{
  alert("storage is supported and you can store data in it"); 
}
else
{
 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.
//sessionStorage 
//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
sessionStorage.removeItem('myKey');

//clear storage 
sessionStorage.clear();
//localStorage 
//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
localStorage.removeItem('myKey');

//clear storage 
localStorage.clear();
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.

Conclusion
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.

28 comments:

  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; atlaslm.com

    ReplyDelete
  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! http://www.bacterialvaginosisremedies.com/home-remedies-for-bacterial-vaginosis/

    ReplyDelete
  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 - trovanumeri.com

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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 http://endurosmale.net

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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; ch.db.ac.kr

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  25. Way cool! Some extremely valid points! I appreciate you writing this post plus the rest of the site is extremely good.


    My web-site Low Testosterone

    ReplyDelete
  26. 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

    ReplyDelete
  27. Yesterday, while I was at work, my cousin stole my iphone and tested to see if it can survive a 30 foot drop, just so she
    can be a youtube sensation. My apple ipad is now
    destroyed and she has 83 views. I know this is entirely off topic but I had to share it with someone!


    Take a look at my blog - Buy Acai Energize

    ReplyDelete
  28. Hello there! I know this is kinda off topic however , I'd figured I'd
    ask. Would you be interested in trading links or maybe guest writing a blog post or vice-versa?
    My site addresses a lot of the same topics as yours and
    I believe we could greatly benefit from each
    other. If you might be interested feel free to send me an e-mail.
    I look forward to hearing from you! Fantastic blog by the way!



    turbo force muscle

    ReplyDelete