All modern browsers (and Internet Explorer 8+) support the ability to store a small amount of data within the browser itself in what’s called Local Storage. The data stored here will persist between user sessions, and in this way it works a lot like cookies. But local storage is different from cookies in some big ways.
- Data isn’t transferred with every page request like it is with cookies
- Data can be stored in larger amounts (usually up to 5MB)
- Currently no way for user to prevent its usage
localStorage Javascript API
Local storage is accessible through the Javascript window.localStorage (or just localStorage) API. There are a number of functions available to manipulate the data in local storage.
- localStorage.setItem(‘foo’, ‘value for foo’) – Assigns data to a specific key.
- localStorage.getItem(‘foo’) – Retrieves the data stored under the specified key. You can also retrieve it with the array style, like this: localStorage[‘foo’].
- localStorage.key(0) – Retrieves the name of the key that’s stored at the specified position (in this case 0).
- localStorage.length() – Returns the number of items stored in localStorage.
- localStorage.removeItem(‘foo’) – Deletes the item stored with the specified key.
- localStorage.clear() – Clears all items stored in localStorage.
Storing Complex Data in localStorage
Local storage can only store simple strings. To store more complex data like arrays or objects, we first turn them into strings using localStorage.setItem(‘foo’, JSON.stringify(obj)) and when we retrieve them, we change them back with JSON.parse(localStorage.getItem(‘foo’)).
localStorage Demonstration
To simply demonstrate how local storage could be used, I created a list of DVDs that a user could add to a “To Watch” list. This list will persist even if the user closes their browser. The list can be cleared by clicking a “Reset” button.
Local Storage Demonstration.
First we needed a list of DVDs to choose from. I used selections from my personal collection and put them into a simple unordered list.
2001: A Space Odyssey
- Across the Universe
- Amélie
- Cars
- Chungking Express
If you never visited the site before, the “To Watch” section will be empty, waiting for you to fill it up.
To Watch
First, we need to check to see if there’s already data stored in localStorage. If there is, we add them to the toWatch array, and to the “To Watch” list in the DOM. This uses jQuery, so be sure to include it.
var toWatch = Array();
if(localStorage['dvds']) {
// turn the stored string into an array
toWatch = JSON.parse(localStorage['dvds']);
// Loop through the array and append the data to the "To Watch" list
for(var i = 0; i < toWatch.length; i++) {
$('.to-watch ul').append('‘ + toWatch[i] + ‘‘); } }Now, when someone clicks on a DVD title, we need to add it to the “To Watch” list.
var toWatch = Array();
$('.dvds li').on('click', function() {
// Append to the existing array
toWatch.push($(this).text());
// Push the array into the local storage under the 'dvds' key.
// (This overwrites what's there)
localStorage.setItem('dvds', JSON.stringify(toWatch));
// Append a copy of the 'li' element to the "To Watch" list
$(this).clone().appendTo('.to-watch ul');
});
Finally, we need to clear the “To Watch” list when someone clicks the “Reset” button.
$('.to-watch button').on('click', function() {
toWatch = Array(); // Empty the array
$('.to-watch ul').empty(); // Empty the DOM list
localStorage.removeItem('dvds'); // Clear the local storage
});
Because we only have one item in our localStorage we could also do localStorage.clear().
Limitations of localStorage
Local Storage is great for user settings and preferences, but it has its limitations.
- The storage amount is limited (again, about 5MB)
- You can only store strings (yes, we can get around that, but it’s inconvenient)
- You can’t retrieve data as flexibly as you can with something like SQL, e.g., SELECT * FROM dvds WHERE rating = ‘PG-13’ ORDER BY title
For more data-intensive applications, consider checking out something like Web SQL or IndexedDB
