Using the Web Storage feature of HTML5 requires a bit of JavaScript, but overall is easy to use, once you learn it’s limits and capabilities.

Web Storage is kind of like a simple, NoSQL database. I say, “like a” because while it is very similar in some respects, it is also different in others.

Web storage was originally designed to be like cookies, but on steroids. First you can store larger amounts of data than a cookie would allow. The data is easier to work, especially as you get into larger amounts of data. Finally, unlike cookies, the data isn’t transmitted back and forth between the client and server with each request, so it speeds up the website.

Web Storage, is similar to cookies in that it is stored locally on the client side. However, this means that since data is local to that machine, if a user moves to a different machine, or even a different browser on the same machine, the data will be lost.

Also, since the data is local, it usually cannot get very large, and there are questions about it’s security since it is stored on the end user’s machine. Therefore, you don’t want to store sensitive data there. Now that very is a bit “relative”. Usually storage amounts are allowed up to 5MB (5 Mega Bytes), compared to 4KB (4 Kilo Bytes).

On a mobile device, the chances of the user using a different browser are slim, however they cannot move between a desktop and a mobile device. So if you need data stored by user, between devices, you need to find a way to handle that.

Another key factor to know when working with Web Storage, is that all data is stored as a string. So if you need to convert it to a number, you will need to use parseInt() or parseFloat() to do the conversion.

On the other hand, you can store session information, and information like a shopping cart, wish list, or even game scores for the user, all with web storage very easily.

Web Storage can be broken down into two main categories.

  • window.localStorage – this data does not have an expiration date
  • window.sessionStorage – stores data for one session – when the browser, or browser tab, closes, the data is lost.

Now, all major current browsers support web storage. IE started in version 8

An Intro to Web Storage in HTML5 was originally found on Access 2 Learn

Assistant Professor

Walter Wimberly is an Assistant Professor at a regional college in Tennessee, teaching Computer Science in the Software Engineering track. He works as a student advisor, oversees curriculum changes, develops new courses, and manages the advisory panel.
Walter taught full time for about 7 years, before going back into “industry” as a full stack Software Developer for a dozen years. There he focused on web based projects coding in JavaScript/jQuery and utilizing the Bootstrap CSS Framework on the front-end, and coding in PHP, ASP/ASP.Net, SQL on the back-end.

Since he loves teaching, he taught as an adjunct web and digital media classes for eight (8) years, while working in industry, and has since returned to teaching full time.

He has been married for over 25 years, and is father to several special needs boys. As such, he is working on some projects to help others who have special needs to be self-sufficient, and support the care givers of those with special needs. Check out his Autism blog for more info.

Similar Posts

Alerts in Bootstrap

ByWalter Wimberly

Bootstrap provides a way to easily display an “alert” message. Essentially it is a background color, and foreground color which work together to make a message standout. An alert is generally going to be a simple block of text, and doesn’t have a lot of extra markups text. This works similarly to if you had…