HTML5 and Local Storage
By Andy Harris
The local storage mechanism is a nice replacement for cookies, and with HTML5, you can
write up to 5MB of data to a special file on the client. This file is not executable and cannot
hold binary data (only strings), so it's reasonably safe.
All the pages that come from your domain share the same storage area, so you can use
this mechanism to keep data persistent between multiple pages. The data also stays on the client
machine (until you remove it), so it can be used to keep track of information over time.
The localStorage attribute is an example of a very simple (but powerful) type of data
structure called a dictionary. You've already used dictionaries many times as a Web developer.
Each piece of data is stored in a key/value pair. The key identifies the name of the information
(say 'firstName'), and the value is the value associated with that key ('Herbert').
HTML attributes are dictionaries (in <a href = "http://www.google.com">, href is the
key, and http://www.google.com is the value). CSS rules are also dictionaries. (In the style
rule color: red;, color is the key, and red is the value.) Some programming languages use
different names for dictionaries, including associative arrays and hash tables.
Access to the local storage is through a special built-in object called localStorage().
This class has a relatively small number of methods, but they are extremely powerful and easy to use:
• localStorage.setItem(key, value): Stores a value associated with a key.
Essentially, key is like a variable name, and value is the value associated with that key.
You can store any type of value you want, but it will be stored as string data.
• localStorage.getItem(key): Retrieves the value associated with the key.
Again, you can think of the key as a variable name. Note that this method always returns a
string value, so you might need to convert the data to another type. If the key does not exist,
you will get the special value null.
• localStorage.removeItem(key): Removes an item from storage. The key and
the value will both be removed. This can be useful if you are running out of space. You are
allotted only 5MB of space, and once it's full, you can't add anything else.
• localStorage.length: Returns the number of key/value pairs in the database.
Usually used in a loop with the key() method to work with every key/value pair.
• localStorage.key(i): Given an integer i, this method finds the corresponding
key. Note that the order of the keys is not guaranteed. Normally, this method is used in a
loop to retrieve all the keys in the database. Then each key is used to look up the corresponding
value.
• localStorage.clear(): Clears all key/value pairs from localStorage. This is a
potentially destructive command, so think carefully before you use it. By definition, localStorage
data is not backed up on the server (or anywhere else). Once it's gone, it's really gone.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
