Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268