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.
If you try to store more than 5MB of data from the same domain, JavaScript will throw a "QUOTA_EXCEEDED_ERR" exception. There is currently no way to change the amount of storage allowed, even with the user's permission.
Amazingly enough, the local storage mechanism works very well on all current browsers, even Internet Explorer.
Of course, any time a Web page can write data to the client machine, there is some concern for privacy and safety. However, the data is stored on the client machine, so it is never transmitted to the server (unlike cookie data). The data is stored on the client machine and belongs to the client. The 5MB limit gives a fair amount of space to Web applications, but even if it is filled, it won't clog up modern machines. Finally, the data is stored in a plain-text format, and it can't be put in a separate file — so it would be difficult to use this technology to create viruses and other troublesome code pests.
It may seem limiting to store data in these simple name/value pairs, but you can actually store very complex data using this mechanism. The value can be any type, including the very rich XML and JSON data storage mechanisms.
dummies
Source:http://www.dummies.com/how-to/content/html5-and-local-storage.html
No comments:
Post a Comment