html5 localStorage local storage

LocalStorage is local stored, which can be used for long -term preservation of data on the entire website. The data saved data does not expire until it is manually removed.

This object can be called in the JavaScript language through Window.LocalStorage or LocalStorage.

1) Restrictions on the same source strategy. If you want to operate the same LocalStorage between different pages, these pages must be under the same protocol, the same host name and the same port. (IE8 and 9 storage data is based on the same host name, ignoring the requirements of the protocol (HTTP and HTTPS) and port number)

2) Only stored locally. LocalStorage's data will not be sent to the server with the HTTP request, which will only take effect locally.

3) Permanent preservation. The saved data did not expire until manual removal.

4) Storage method. LocalStorage's storage method is made and value. The value of the value must be a string type (not the non -string, and it will also be converted to a string during storage. The TRUE value will be converted to TRUE).

5) Storage limit: Different browsers store the upper limit, but most browsers limit the upper limit to less than 5MB.

6) Share with the browser. LocalStorage data can be shared between the same -source pages of different tabs of the same browser.

The smallest version of the LocalStorage browser: IE8, Chrome 5.

LocalStorage is more suitable for 2 places:

1) Temporary preservation scheme with large data. Such as automatic preservation of online editing articles.

2) Multi -page access common data. SessionStorage is only applicable to the same tab page. LocalStorage can share data in multiple tabs in comparison.

ReadOnly Int LocalStorage.Length: Return a integer, indicating the number of data items (key values ​​pairs) stored in the LocalStorage object.

String LocalStorage.Key (int index): Returns the key name of the INDEX serial number of the current LocalStorage object. If not returned NULL.

StringLocalStorage.getITEM (String key): The value corresponding to the key name (key). If not returned NULL.

VoidLocalStorage.setItem (String key, String Value): This method accepts a key name (key) and value as a parameter to add the key value to the storage; if the key name exists, the corresponding value is updated.

VoidLocalStorage.removeItem (String Key): Remove the specified key name from the LocalStorage object.

VoidLocalStorage.clear (): Clear all items of the LocalStorage object.

Storage: When changes to LocalStorage, this event is triggered.

This incident has a different trigger mechanism in IE 11 and Chrome:

1) Whether the current page triggers: When the current page is operated by LocalStorage, IE 11 is the current page that also triggers this event. Chrome is the current page that does not trigger this event.

2) Repeat operation of LocalStorage: If you deposit duplicate data, IE 11 is triggered this event, and Chrome does not trigger this incident.

 LocalStorage.setItem ('Testkey', 'This is a test value "); //

 LocalStorage ['testKey'] = 'This is the value value of a test';

 LocalStorage.getITEM ('Testkey'); // => Return to the corresponding value of testKey

 LocalStorage ['testKey']; // => This is the value of a test

LocalStorage can also store JSON objects: During storage, the object is converted to text format through json.stringify (); when reading, the text is converted back to the object through json.parse ().

 var userntity = {name: 'tom', age: 22}; // Storage value: convert the object to the JSON string localStorage.Setitem ('user', json.stringify (useErentity)); // When the value is taken:获取到的Json字符串转换回对象var userJsonStr = localStorage .getItem('user');userEntity = JSON.parse(userJsonStr);console.log(userEntity.name); // => tom