HTML 5 Local Storage – Read These 5 Tips

HTML 5 Local Storage – Read These 5 Tips

Howdy Readers,

With HTML 5, CSS 3 and jQuery, there is lots of buzzing around that it requires no back-end code and database logic for building a rich & functional website. Yes. I agree to this point up to a certain extent. The Trio – HTML 5 + CSS 3 + jQuery is great & powerful combination when it comes to creating Rich Internet Applications(RIA).

Let's get started with HTML 5 Local Storage & the perks it provides.. Click To Tweet

However, you need server-side programming languages for fully functional web applications which involves lots of complex functionality along with logic.

HTML 5 Local Storage

HTML 5 Local Storage

What is HTML Local Storage?

HTML Local Storage or Web Storage is the storage area provided within all the modern browsers.

TIP 1 : HTML5 local storage provides the ability to store data locally within the user’s browser.

TIP 2 : Before HTML5, application data had to be stored in cookies.

TIP 3 : Local storage is per origin (combination of per domain & protocol).

TIP 4 : The storage limit is up to 5MB and the data is never transferred to the server.

TIP 5 : Local storage is more secure and it boosts performance.

HTML5 Local Storage Objects

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

  • LocalStorage : Stores data locally for lifetime. It never expires.
  • SessionStorage : Stores data per user session. Data is lost when session ends.

Local Storage

The localStorage object stores the data for lifetime Which means that the data will not be deleted when the browser is closed, and will be available always.

Usage:

Note: localStorage stores values a name/value pair in string format.

SessionStorage

The sessionStorage object is similar to localStorage, except that it stores the data for only one session i.e The data is deleted when the user closes the specific browser or browser tab.

Usage:

I hope you have understood the localStorage concept in HTML 5 and are set to implement it in your application. Please let me know in case of any issue or challenges encountered, I will be more than happy to help you guys 🙂

What do you think?

Dear Reader,
If you have any questions or suggestions please feel free to email us or put your thoughts as comments below. We would love to hear from you. If you found this post or article useful then please share along with your friends and help them to learn.

Happy Learning :)