HTML5 localStorage is an HTML5 API that allows us to save string data in the browser. localStorage is part of the web storage specification, it also has a sister called sessionStorage which is slightly different - but very similar. localStorage stores the data and has no expiration - it’s persistent, whereas sessionStorage is limited to the session only, meaning when you close your browser - it’s gone. In this tutorial we’re going to create a small localStorage app that autosaves your data in the browser.
Before doing anything, it’s probably wise to detect whether the browser supports localStorage (this even includes sessionStorage):
Setting, getting and clearing
For setting data, we need to do the following:
For getting our data:
For removing the data:
And for clearing the entire localStorage (not just the individual item):
Let’s create some HTML for testing localStorage:
We then need to hook into our textarea to start saving the data:
We can then start saving data with it by hooking into the textarea’s value:
The above sets an item called ‘autosave’ which then uses the value of the textarea. But this won’t work or update itself, so what we need to do is set an interval to update it every second (1000). This can be done like so:
localStorage has a quota in which you can hit and no longer store further data, so we need to clear it. I’m not sure on the exact figure, but I’ve read it’s around 5MB of data storage for Chrome, FireFox, Opera, and 10MB for Internet Explorer, which beats a Cookie handsdown at just 4KB quota. To catch any errors and alert the user, we need to use the ‘try’ and ‘catch’ methods:
You can see I’ve added the ‘setInterval’ inside the ‘try’ section, which it will keep updating the data every second until it hits the quota limit. It would be good practice when developing to clear the localStorage data after the required actions are completed (such as storing form data).
There are two ways we can rid the browser of localStorage, using the aforementioned ‘setItem’ and ‘getItem’ methods:
Running a localStorage script
Putting the above together, we can create a really simple localStorage app that we can type into, it saves our data periodically (once a second) and also the option to wipe the data altogether, or just remove the item itself. Let’s go through it, comments are coded inline:
The above function is a really simple usage of the localStorage API, but you can see it’s potential. If you visit the demo, type anything you want and providing your browser supports HTML5 localStorage, you can refresh the page as much as you want, close the browser and come back to it - and it’ll still be there. If your browser doesn’t support it, you’ll get a note saying so.
The web storage API was implemented a few years back now, and as such was integrated into IE8 (and obviously IE9). This makes it even better when working with it, as we can all start to move away from supporting IE7. IE8 is actually a blessing on a few levels compared to IE7, it’s still a massively popular browser world-wide, but it supports things like querySelector, localStorage, and also CSS such as box-sizing:border-box - all things modern development thrives upon. It’s not all doom and gloom, see the silver linings.
Those times you’ve filled out forms, the internet dies, or you accidentally refreshed, gone back, an error occurred and wiped the form - gone! What’s even better is that you can even turn off your computer, disconnect from the internet - everything - and it’ll still be there when you come back. Try it on the demo, type anything you want, refresh, reboot, have a play - and download should you feel you can use it in any of your projects.