JS Basic article--localstorage use points

Localstorage is primarily used to replace cookies and to address the problem of read-write difficulties and limited capacity for cookies (which may refer to the use of cookies). The localstorage has several characteristics

1.localStorage is a normal object, and the operation of any object is applicable.

The property value of a 2.localStorage object can only be a string.

This requires special attention, assuming that we want to save an object into the Localstorage, you can use the stitching method. Such as

var obj = {    "na=me": "Chua",    age:9}//stitching to Localstoragevar str = ""; for (var i in obj) {    str + = encodeURIComponent (i) + "=" + encodeURIComponent (Obj[i]) + ";"} str = str.substring (0,str.length-1); localstorage.testobj = str;//parse out var stra = LocalStorage.testObj.split (";"); var newObj = {};for (var i = 0; i < stra.length; i++) {    var tmp = stra[i].split ("=");    Newobj[decodeuricomponent (tmp[0])] = decodeURIComponent (tmp[1]);}

Of course, you can also use the JSON class to convert an object to a string and then convert the JSON string to a truly usable JSON object format when it is taken out.

3.localStorage supported default space size of 5 m, modern browser support is good

Borrowing xiaowei0705 's HTML5 localstorage local storage transduction

　　

It is important to note that the use of the mobile phone in the background to open up memory space support.

"Quota_exceeded_err" is an exception, and if you use a storage capacity that exceeds the limit (5M), the exception is reported.

The 4.localStorage itself has a method with

Add key-value pairs: Localstorage.setitem (Key,value)

Get key value: Localstorage.getitem (Key)

Delete key-value pairs: Localstorage.removeitem (key).

Clears all key-value pairs: localstorage.clear ().

Gets the property name (key name) of the Localstorage: Localstorage.key (Index).

There is a property that is not the same as the normal object length:

Gets the number of key-value pairs saved in Localstorage: Localstorage.length.

The following example is used to get the key value pairs of the Localstorage

for (Var i=0;i<localstorage.length;i++) {    Console.log (Localstorage.key (i) + ":" + localstorage.getitem ( Localstorage.key (i))); }

The principle of believing in native methods should try to use native methods to manipulate localstorage. However, there are some strange quota_exceeded_err errors when calling SetItem () on Iphone/ipad. The workaround is to RemoveItem () before SetItem. So from this compatibility point of view, it seems that the use of object to add/delete key value pairs more convenient, compatible and stronger.

5.localStorage Events

Localstorage The storage event, the storage action cannot be canceled in the handling function of the stored event.

Storing events is just a notification that the browser has given you after the Localstorage data has changed. Note that the condition here is that the data really has changed. That is, if the current storage area is empty, then calling clear () will not trigger the event. Or you can set a value that is the same as the existing value by SetItem (), and the event is not triggered. It is triggered when a storage area is changed, which contains many useful properties:

• • Storagearea: Indicates the storage type (session or local)
  • Key: The key where the change occurred
  • The original value of the Oldvalue:key
  • New value for Newvalue:key
  • url*: Key changes the URL that occurred

Note the URL attribute in the earlier specification is the URI attribute. Some browsers publish earlier and do not contain this change. For compatibility reasons, you should check if it exists before using the URL property, and if you do not have a URL attribute, you should use the URI property
PS: It is normal to store and read in Firefox and Chrome, but there seems to be a problem with triggering the storage event, and chrome modifying localstorage can trigger the storage event on this page, Firefox The storage event of window is not triggered after the page modification storage, but simultaneously accesses a.html and b.html, SetItem in page A can trigger the storage event of window on page b. The same SetItem on page B can trigger the storage event of window in page A. In IE9, the value of the page itself can trigger the storage event of the current page, and the setting of the current page can trigger the storage event of the other page in the same "origin" window. This seems to make more sense. Example recommendation Primetechblog's preliminary webstorage localstorage

Therefore, it is recommended that you write compatible processing functions for compatible browsers, or simply do not use storage events.

Instance

if (window.addeventlistener) {    Window.addeventlistener ("Storage", handle_storage, False);} else {    Window.attachevent ("Onstorage", handle_storage); function Handle_storage (e) {    if (!e) {e = window.event;}    Response Code Section
    ...}

Some small points:

Localstorage the way to access through the domain name will work

If the clear () method is called, then key, OldValue, and newvalue are set to null.

Localstorage using the same way

• Localstorage-Data storage with no time limit
• Sessionstorage-Data storage for a session

JS Basic article--localstorage use points