Some suggestions on the use of localstorage in HTML5

Last month at the end of the W3ctech, some colleagues mentioned the topic of localstorage, I think in HTML5 many new features, Localstorage is more practical at the same time the browser is also better than the characteristics of the implementation.

Localstorage's specifications are described here: http://dev.w3.org/html5/webstorage/

In the first detail, Localstorage can only store data in the form of key-value pairs (Key-value pair), and both key and value can be stored as string types only. The reason for this is that because JS is a dynamic language, we can pass int data (such as Localstorage.setitem ("a", 1) at setitem time, but it will be converted to a string and then stored and ready to be called when we use GetItem to access "a "When (Localstorage.getitem (" a ")), the string" 1 "is obtained instead of the number 1.

Second, although localstorage[key] = value of the mainstream browser is supported, but the standard does not have a clear requirement, so it is not recommended to write code. And the obvious question is that reading and writing to a key such as length, SetItem, GetItem, and clear can create problems. If we execute:

Localstorage.setitem = null;

Localstoarge.removeitem = null;

Localstorage.clear = null;

The completeness of the entire Localstorage interface will be compromised.

Of course, to JS more familiar with the children's shoes can think of an additional metamorphosis problem, after executing the above code, Localstorage still have a way to return to normal?

Thirdly, if we do not want to store strings, but rather more complex types of data, we recommend that you work with the JSON-related function json.parse/json.stringify. This allows us to facilitate the conversion between complex data structures and strings, using Json.parse (Localstorage.getitem ("a") when fetching data, and using Localstorage.setitem ("a" when writing data). Json.stringify (obj)).

The localstorage, like cookies, are independently stored in terms of domain names and have a capacity limit (typically 5MB), which triggers a quotaexceedederror exception if the capacity limit is exceeded when we call SetItem. My experience is, if you are the text, generally do not touch the line, you can ignore, if the Datauri way to save the binary files, you need to pay special attention to, video, basically no less than 5MB, so will not consider localstorage, and do not pay special attention; But if it is a picture, It is easy to hundreds of K pictures to save a few more than enough 5MB, so it is necessary to mention a wake up. Of course, some browsers will also remind users to confirm to allow the site to use more capacity, that is another said.

The above four recommendations are my personal use of localstorage most commonly encountered situation, here to share to you.

Finally, a "high-order" technique is included: the Window.onstorage event. In fact, this is not much more advanced, but only with a relatively small number of places. If we open multiple pages in the same domain at the same time, when I manipulate Localstorage.setitem, Localstorage.removeitem or localstorage.clear on a single page, other pages in the same domain will trigger this event. The parameters that accompany the event are this:

Window.onstorage = function (event) {

var key = Event.key//Modified key Name

var oldValue = event.oldvalue//Old value

var newvalue = event.newvalue//New value

var url = event.url//URL of the page that triggered the change

var storage = Event.storagearea//Current Localstorage reference (when Sessionstorage changes, here is the current sessionstorage reference, OK, pull away, can not understand the first to ignore)

}

This feature can help us to achieve simple communication, synchronization and data interaction across multiple pages, such as modifying a user's nickname in a site's user Settings page, and all of your pages ' nicknames are instantly changed. Of course, the note with it is to avoid circular modification, so that the browser into the dead loop.

Above

In fact, there are many details for Localstorage, HTML5 interested in children's shoes can be further excavated. In the coming year, we will certainly talk about Localstorage. By then, we can do more in-depth discussion and exchange.

Some suggestions on the use of localstorage in HTML5