When this article is written localstorage in javascript isn't anything new. It's been available since html5 rolled out on the web, and is simply a way of storing user data between page views.
Cookies in javascript
As most people know, nothing in javascript is saved when a user reloads a page or navigates to another. All variables, functions and so on disappears every time a page is shut down, and are redeclared anew every time the script is run again.
To be able to save data between page requests cookies has been the only option in the past. They are small text files that are saved on the users computer, containing some small string of data that can be retrieved by javascript (and servers). By using these it's possible to save information for different users in a longer time span, and through multiple page requests.
They are also sent to the server every request and can also be read, changed and set with for example php. Below is an example of how a cookie is set in javascript.
var d = new Date();
var text = 'Hello, World';
// Set the cookie expiration date to 1 hour
d.setHours(d.getHours() + 1);
// Create the cookie
document.cookie = 'testcookie=' + text + ';expires=' + d.toUTCString();
Localstorage in javascript
It's not really any hard to work with cookies in javascript, but it is a bit cryptic. It also has some disadvantages that only 4kb of data can be saved in them, they inflict a small (very small) performance impact, and they have a reputation of being a bit "spy-like". Instead there's now a much better way of doing all this, and that is with the use of localstorage!
Localstorage is just like cookies a way of storing data between page request. But only on the client side should be noted. They are not automatically sent to the server, to do it you'll have to use for example ajax. It's a more clean and simpler way of doing it and works in all modern browsers, and all the way down to internet explorer 8.
What's so good about localstorage is it works just like an object. If you're familiar with those localstorage will be the simplest thing in the world to learn. It's just like a normal object where you can set, change and remove properties and values.
// Create a new localStorage property and set a value
localStorage.test = 'Hello, World';
console.log(localStorage.test); // Hello, World
console.log(localStorage['test']); // Hello, World
// Change the value
localStorage.test = 'Hello';
// Delete the property completely
delete localStorage.test;
Something important to point out is that localstorage is unique for every visitor on every website (domain). Data that's been saved for some visitor on some website can't be read by anyone else, or on any other website.
Built in methods
There's a couple built in methods for localstorage that can be used to make it easier to work with it. To set data the method setItem can be used, getItem to read, removeItem to remove and clear to clear out all properties and values from the object.
// Set
localStorage.setItem('test', 'Hello, World');
// Get
localStorage.getItem('test');
// Remove
localStorage.removeItem('test');
// Clear localStorage completely
localStorage.clear();
However it's not so fantastic that you can save arrays and objects directly to localstorage yet, it's only strings that can be saved. But fortunately enough we have the JSON.stringify and JSON.parse methods, that can be used to convert arrays etc into strings and back in a simple way.
var fruits = ['orange', 'banana', 'apple'];
// Write the array to localStorage
localStorage.setItem('fruits', JSON.stringify(fruits));
// Read the array from localStorage
fruits = JSON.parse(localStorage.getItem('fruits'));
// .. And print out the fruits
fruits.forEach(function (fruit) {
console.log(fruit); // orange, banana, apple
});
Get started with localstorage
For those who wants there's even more to read about it, and there's also other different types of web storage like sessionstorage and websql. But to get started and learn how it works, and start building web applications in javascript with data that's saved between page views, it's actually not any harder than this. Unlike before when the only option was cookies and developers pulled their hair from frustration.
One last thing is to think about the security when it comes to localstorage, and not saving sensitive data about users there like passwords or card information. It's safer than cookies in the way it's not sent over the internet to a server anywhere. But everything is still saved in clear text at the user, and can easily be read by a malicious person.