Build Storages with HTML5

Build Storages with HTML5 is part 9 of Beginner’s Guide to HTML5.

Storages!!! Don’t jumbled with databases such like MySQL or Postgres…etc. We are talking about local storages. Something like cookies. But something better than cookies. It is actually a storage in the user’s web browser. With HTML local storage, web pages can store data locally within the user’s browser. Previously, this was done with cookies. However, local storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance. The data is stored in name/value pairs, and a web page can only access data stored by itself. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

HTML Local Storage Objects

HTML local storage provides two objects for storing data on the client.

  • window.localStorage – stores data with no expiration date
  • code.sessionStorage – stores data for one session (data is lost when the tab is closed)

When you are using this feature on your web site, better to check whether user’s browser supports this feature. Here is the code snippet to check that.

[code language=”js”] if(typeof(Storage) !== “undefined”) {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
[/code]

Now let’s go each of the above mentioned objects.

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Here is how you can store a key value pair as a local storage object. Put this code segment inside the true condition of the above if statement. Key is the first parameter and the value is the second parameter.

[code language=”js”] localStorage.setItem(“lastname”, “Vandebona”);
[/code]

Here is the code segment to retrieve the value of a relevant key stored in the local storage.

[code language=”js”] localStorage.getItem(“lastname”);
[/code]

Also you can write the above two codes like as this.

[code language=”js”] //Store
localStorage.lastname = “Vandebona”;
//Retrieve
localStorage.lastname;
[/code]

To remove a key value pair from the local storage use the following code segment. It used the key to remove the object.

[code language=”js”] localStorage.removeItem(“lastname”);
[/code]

Here we are going to demonstrate this feature. Try to refresh your web page, close the tab, close the web browser and click the following buttons randomly to see the differences.

Result Text:   

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window. The following example counts the number of times a user has clicked a button, in the current session. Try to refresh your web page, close the tab, close the web browser and click the following buttons randomly to see the differences.

Result Text :

[cjtoolbox name=’Local_Storage_HTML5′ ] [/cjtoolbox]

The key name of the session storage object is clickcount and we are increment the value of it each time button is clicked.

[code language=”js”] if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById(“result”).innerHTML = “You have clicked the button ” +
sessionStorage.clickcount + ” time(s) in this session.”;
[/code]

For your information this same thing can be done by using cookies. But with the emerge of HTML5, now we do not need to waste cookies for this simple functionality. So in the next section we are going to view a online web site without going online. Sounds Crazy isn’t it? Keep waiting for our next article.

What’s Next?

Learn how to Offline Web Browsing.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

17 Comments

Leave a Reply
  1. Thanks for your personal marvelous posting!

    I really enjoyed reading it, you may be a great author.I will be sure to
    bookmark your blog and may come back very soon. I
    want to encourage you to definitely continue your great
    posts, have a nice weekend!

  2. wonderful put up, very informative. I wonder why
    the other experts of this sector do not notice this. You should proceed
    your writing. I am confident, you’ve a great readers’ base already!

  3. І have read so many posts about the blogger lovers
    but this piece of աriting is actually a fastidious piece of writing, keep it up.

  4. Awesome things here. I’m very satisfied to see your
    article. Thanks a lot and I’m looking ahead to contact you.
    Will you please drop me a mail?

  5. Way cool! Some extremely valid points! I appreciate you penning this
    write-up and also the rest of the site is very good.

  6. I just could not go away your site prior to suggesting that I actually loved the usual
    info an individual provide on your guests? Is gonna be gain continuously to check up
    on new posts

  7. Thank you a bunch for sharing this with all folks you really realize what you’re speaking approximately!
    Bookmarked. Kindly also visit my website =).
    We may have a hyperlink alternate agreement among us

  8. Hey there! I’ve been following your web site for some time now and finally got the
    courage to go ahead and give you a shout out from Austin Texas!
    Just wanted to say keep up the great work!

  9. Hello I am so grateful I found your web site, I really found
    you by mistake, while I wass researching on Google for something else, Regardless I am hesre
    noow and would just like to say thanks for a fantastic post and a
    all round exciting blog (I also love the theme/design),
    I don’t havee time to look over it all at the moment but I have book-marked it
    and allso added your RSS feeds, so when I hav time I will bee back to read more, Please do keep up the superb
    jo.

  10. I am really impressed with your writing skills and also with the layout on your blog.
    Is this a paid theme or did you modify it yourself? Anyway keep up the nice quality writing, it’s rare
    to see a great blog like this one nowadays.

  11. My brother sugyested I migh like this website.
    He was once totally right. This put up truly made my day. You
    can not imagine simply how a lot time I had
    spent for this info! Thank you!

Comment Below