detailed explanation of LocalStorage of html5

LocalStorage has two APIs in the browser: LocalStorage and SessionStorage, which exist in Window objects: localStorage corresponds to Window.LocalStorage, and sessionStorage corresponds to Window.SessionStorage.

The difference between LocalStorage and SessionStorage is mainly due to its survival.

 LOCALSTORAGE.SetITEM (B, Isaac); // Set B as isaacvar b = localStorage.getITEM (b); // Get the value of B, is Isaacvar a = localStorage.Key (0); // Get the 0th data item The key name, here is the blocalstorage.removeItem (b); // Clear the value of the value of b localstorage.clear (); // Clear all localStorage data under the current domain name

The role of the function here refers to: how to isolate the localStorage between different pages (you can't read Tencent's LocalStorage on Baidu's page, hahaha).

LocalStorage can read/modify the same LocalStorage data as long as the same protocol, the same host name, and the same port.

SessionStorage is more stringent than LocalStorage. In addition to protocols, host names, ports, it is also required to be under the same window (that is, browser tab page).

LocalStorage is theoretically permanent and effective, that is, it will not disappear if it does not take the initiative. Even if the saved data exceeds the size specified by the browser, it will not clear the old data and only report an error. However, it should be noted that in the webview of the browser on mobile devices or the WebView used by each Native APP, LocalStorage is unreliable. It may be due to various reasons (such as exiting APP, network switching, insufficient memory, etc.) Clear.

SESSIONSTORAGE's survival period, as the name suggests, is similar to session, as long as the browser is turned off (including the browser tab page), it will be cleared. Because the survival period of SessionStorage is too short, the application scenario is very limited, but on the other hand, it is not easy to have abnormal conditions and more reliable.

LocalStorage is a standard key-value pair (Key-Value (KV) data type, which is simple but easy to expand. As long as it is used in a coding method to convert the objects that want to store LocalStorage into a string, it can easily support it. For example: convert the object to the JSON string, you can make the storage object; convert the picture to DataURL (base64) to store the picture. In addition, for the type of key value, for the data type, the only characteristic of the key is also very important. If it is repaid with the same key, it will cover the value of the last time.

Unfortunately, LocalStorage natively does not support the setting time. If you want to set it, you can only encapsulate a layer of logic to achieve:

 Function set (key, value) {var curtime = new date (). // Get the current time localStorage.setItem (key, json.stringify ({val: value, time: curtime}) ); // Convert The JSON string sequence} Function Get (key, exp) // EXP is the setting time of the setting {var value = localStorage.getItem (key); // obtain the storage element var databj = json.parse (val); // Analyze the JSON object if (new date (). Gettime () -dataObj.time> Exp) // If the current time -minus the storage element set at time> Expired time {console.log (expires);/// /Prompt for expiration} else {console.log (value =+dataobj.val);}}

At present, the industry is basically unified to 5m, which is much larger than the 4K of Cookies, saving a little bit of savage year.

Due to the security strategy of the browser, LocalStorage cannot be cross -domain, nor can the sub -domain name inherit the LocalStorage data of the parent domain name. This is quite different from the cookies.

In the current browser environment, LocalStorage is not completely stable. There may be a variety of bugs. Be sure to consider abnormal processing. I personally think that LocalStorage is just a optimization method of localization of resources. It cannot reduce the availability of the program because of using LocalStorage. It is absolutely opposed to the abnormal processing of output point error information in the console. The abnormal processing of LocalStorage is generally used to capture/process abnormalities with TRY/CATCH.

The current general approach is to detect whether Window.LocalStorage exists, but some browsers have bugs. Although it supports LocalStorage, there may even be low -level bugs such as SetITEM () in the actual process. Therefore, I suggest that you can determine whether the browser supports LocalStorage by set/get a test data in the TRY/CATCH structure. Of course, remember to delete the test data after the test.

The Resources -Local Storage panel and Resources -Session Storage panel in the chrome developer tools can see LocalStorage data under the current domain name.

In addition, when setITEM () is sometimes set on iPhone/iPad, weird quota_exceeded_err error appears. At this time, it is usually ok before setItem.

store.js

Mozilla/LOCALFARAGE

localfont

The above is the detailed explanation of the LocalStorage of HTML5 introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!