HTML5 Localstorage Local Storage principle

When it comes to web development, local storage, the first thing we should think of is cookies, the earliest cookies naturally are known to all, the problem is too small, probably 4KB, and IE6 only support each domain name 20 cookies, too little. The advantage is that we all support, but also good support. Long time ago, those who disable cookies are also slowly nonexistent, as if the previously disabled JA vasc ript users do not exist.

UserData is IE's stuff, rubbish. Now use the most is Flash bar, space is a cookie 25 times times, basically enough. Then Google launched the gears, although there is no limit, but the uncomfortable place is to install additional plug-ins (no specific research). To the HTML5 all these are unified, the official suggestion is each website 5MB, very big, save some strings, enough. The more bizarre is that all supported browsers are currently using 5MB, although some browsers can let users set, but for Web page makers, the current situation on the 5MB to consider is more appropriate.

Supported by the picture above, ie at the time of 8.0 support, very unexpected. However, it is necessary to note that, IE, Firefox test when you need to upload files to the server (or localhost), directly point to open the local HTML file, is not.

The first thing is to detect whether the browser supports local storage. In HTML5, local storage is the property of a window, including Localstorage and Sessionstorage, from which the name should clearly identify the difference between the two, which is always local, and the latter is only accompanied by a session, and the window closes once it is closed. The use of the two is exactly the same, taking Localstorage as an example.

The way to store data is to add an attribute directly to window.localstorage, such as: Window.localstorage.a or window.localstorage["a". Its read, write, delete operation method is very simple, is a key-value pairs of the way, as follows:

The most recommended use here is GetItem () and SetItem (), clearing the key-value pairs using RemoveItem (). You can use clear () If you want all key-value pairs to be cleared at once. In addition, HTML5 provides a key () method that can be used without knowing what key values are available, as follows:

Write one of the simplest, using local stored counters:

Keep refreshing to see the numbers rising a little, as shown in the following figure:

It should be noted that HTML5 local storage can only save strings, any format will be automatically converted to string when stored, so read, you need to do the type of conversion. This is why the parseint must be used in the previous code.

In addition, in Iphone/ipad sometimes set SetItem () will appear strange quota_exceeded_err error, then generally in SetItem before, first RemoveItem () ok.

HTML5 Local storage, also provides a storage event, you can monitor the change of key value pairs, using the following methods:

For event variable E, it is a Storageevent object that provides some useful properties to observe the changes in key value pairs, such as the following table:

Here add two key values to A and B, and add a button. Set a fixed value for a, and modify the value of B when the button is clicked:

The test found that the current browser is not very good support for this, only the ipad and Firefox support, and Firefox support is messy, E object does not have those attributes. The ipad is very well supported, with E.uri (not e.url), Safari on the desktop, weird.

Browsers now have good developer debugging capabilities, and the following are the Chrome and Firefox debugging tools to view Localstorage:

In addition, currently JA Vasc ript uses a lot of JSON format, and if you want to store it locally, you can call Json.stringify () directly into a string. When read out, call Json.parse () to convert the string to JSON format, as follows:

The JSON object is basically supported on browsers that support Localstorage, and it needs to be noted that IE8 supports JSON, but if you add the following compatibility mode code, it's not going to IE7 mode (still supports localstorage at this time, Although the display window.localstorage is [ob ject], not the previous [ob ject Storage], the test found that GetItem (), SetItem (), etc. are available.

<me ta content= "ie=7" http-equiv= "x-ua-compatible"/>