Getting started
A few easy-to-use methods provide HTML5 web storage functions. These methods support setting a key/value pair, two options for retrieving a value based on a key, clearing all key/value pairs at once, and removing a specific key/value pair. Table 3 shows the available HTML5 web storage methods.
Table 3. HTML5 web storage methods
Method | Description |
---|---|
setItem(key, value) |
Adds a key/value pair to the web storage object for later use. The value can be any data type: a string, number, array, and so on. |
getItem(key) |
Retrieves a value based on the key that was used to store it in the first place. |
clear() |
Clears all key/value pairs from the web storage object. |
removeItem(key) |
Removes a specific key/value pair from the web storage object based on a key. |
key(n) |
Retrieves the value for key[n]. |
When creating and adding key/value pairs to the web storage object, you can use any data type as the value in the pair (a string, number, array, object, and so on). To store an array or object, you must use the JSON object to convert the data to a string using the JSON.stringify
method. When retrieving the data, you can parse it using JSON.parse
, which returns your object or array in its original state. There are also two different ways to add a key/value pair to the web storage object. The first is to use the setItem
method, as in Listing 2.
localStorage.setItem('myKey', 'myValue');
The second option for adding a key/value pair to the web storage object is to set the key’s value directly using the web storage object with dot syntax, as in Listing 3.
localStorage.myKey = 'myValue';
Retrieving stored values is just as easy. Again, there are two options. The first is to use the getItem
method, which takes a key as an argument and returns the corresponding value if one exists. Listing 4 shows an example.
localStorage.getItem('myKey');
The second option for retrieving a key/value pair from the web storage object is to access it directly using dot syntax, as in Listing 5. This example returns the 'myValue'
string value that was set in the previous examples.
localStorage.myKey;
There are also two ways to remove stored data. You can remove all items at once or you can remove individual items one at a time. To remove all items from web storage at once, use the clear
method, as shown in Listing 6.
localStorage.clear();
To remove a single key/value pair from a web storage object, you need to use the removeItem
method. Listing 7 shows an example of the removeItem
method that receives a key as an argument to identify what key/value pair to remove from the storage object.
localStorage.removeItem('myKey');
Listing 8 shows an example of how to use the JSON object to store an array as a string using JSON.stringify
. You handle objects the same way.
var myArray = new Array('First Name', 'Last Name', 'Email Address'); localStorage.formData = JSON.stringify(myArray);
To retrieve the string version of the array from web storage and convert it back to a usable array in JavaScript, simply use the JSON.parse
method, as shown in Listing 9.
var myArray = JSON.parse(localStorage.formData);
Internet Explorer 8+, Opera 10.5+, Firefox 3.5+, Safari 4+, and Chrome all include a native JSON object to support the code in the previous examples. If you use an earlier browser, you can download the json2.js file (see Resources).
As shown thus far, web storage is easy to use. However, before jumping in you should be aware that security can be a concern on shared machines. Web storage is not any more secure than cookies. Don’t store sensitive information, such as passwords or credit card numbers, on the client side.