Web Development

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.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

17 Comments on "Build Storages with HTML5"

Notify of
avatar
Sort by:   newest | oldest | most voted
Marta Sikora
Guest

I evеry time spent mу half аn hour to read this webpage’s
articles daily along with ɑ cup of coffee.

Giselle Bristol
Guest

Thanks for sharing your thoughts oon free tutorials. Regards

Robby Goodin
Guest

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!

Nichole
Guest

Amazing! Its actually aawesome article, I have got
much clear idea on the topic of from this piece of writing.

Mitchell
Guest

I pay a quick visit everyday a few blogs and websotes too read content,
exchept this webb site gives feature based posts.

Johnny
Guest

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!

Georgiana Mclemore
Guest

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

Tania
Guest

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?

Bertie
Guest

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

Raymond
Guest

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

Porter
Guest

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

Mattie kelley
Guest

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!

Angelo
Guest

Keep on working, great job!

Nancee
Guest

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.

Lois
Guest

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.

Brigida
Guest

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!

Steffen
Guest

Saved as a favorite, I love your site!

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW