Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what is the concept of localstorage in html5", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the concept of localstorage in html5" article.

HTML API

There are two localstorage in the browser's API: localStorage and sessionStorage, which exist in the window object: localStorage corresponds to window.localStorage,sessionStorage and corresponds to window.sessionStorage.

The main difference between localStorage and sessionStorage lies in its survival time.

Basic usage

LocalStorage.setItem ("b", "isaac"); / set b to "isaac" var b = localStorage.getItem ("b"); / / get the value of b as "isaac" var a = localStorage.key (0); / / get the key name of the 0th data item, here it is "b" localStorage.removeItem ("b"); / / clear the value of b localStorage.clear (); / / clear all localstorage data under the current domain name

Scope

The scope here refers to how to isolate the localStorage between different pages (you can't read Tencent localStorage on Baidu pages, ).

LocalStorage can read / modify the same localStorage data as long as it is under the same protocol, same hostname and same port.

SessionStorage is a little more stringent than localStorage, in addition to the protocol, hostname, port, but also under the same window (that is, the browser tab).

Survival period

LocalStorage is theoretically permanent, that is, it will not disappear without active emptying, and even if the saved data exceeds the size specified by the browser, it will not empty the old data and will only report an error. However, it should be noted that in browsers on mobile devices or in the WebView used by each Native App, localStorage is unreliable and may be emptied for a variety of reasons (such as exiting App, network switching, insufficient memory, etc.).

The lifetime of sessionStorage, as its name implies, is similar to session, which is emptied as long as the browser is closed (including the browser's tabs). Because the lifetime of sessionStorage is too short, the application scenario is very limited, but on the other hand, it is not easy to occur abnormal conditions, so it is more reliable.

Data structure

Localstorage is a standard Key-Value (KV) data type, which is simple but also easy to expand. It can be easily supported as long as the objects you want to store in localstorage are converted into strings in some coding way. To give an example: convert an object to a json string, you can store the object; convert an image to DataUrl (base64), and you can store a picture. In addition, for the key value to the data type, the "key is unique" feature is also very important, if the same key is assigned repeatedly, the last value will be overwritten.

Expiration time

Unfortunately, localstorage natively does not support setting expiration time. If you want to set it, you can only encapsulate a layer of logic to implement it:

Function set (key,value) {var curtime = new Date () .getTime (); / / get the current time localStorage.setItem (key,JSON.stringify ({val:value,time:curtime})); / / convert to json string sequence} function get (key,exp) / / exp is the set expiration time {var val = localStorage.getItem (key); / / get the stored element var dataobj = JSON.parse (val) / parse the json object if (new Date (). GetTime ()-dataobj.time > exp) / / if the current time-minus the time the stored element was set at creation time > expiration time {console.log ("expires"); / / prompt expiration} else {console.log ("val=" + dataobj.val);}}

Capacity limit

At present, the industry is basically unified for 5m, which is much bigger than cookies's 4K, so save it.

Domain name restriction

Due to the security policy of the browser, localstorage cannot cross-domain, nor can it make the child domain name inherit the localstorage data of the parent domain, which is quite different from cookies.

Exception handling

Localstorage in the current browser environment, is not completely stable, there may be a variety of bug, be sure to consider exception handling. Personally, I think that localstorage is only an optimization means of resource localization, and the usability of the program cannot be reduced because of the use of localstorage. I am absolutely opposed to exception handling that just outputs some error information in console. Exception handling in localstorage generally uses try/catch to catch / handle exceptions.

How to test whether the user's current browser supports localstorage

At present, it is a common practice to detect the existence of window.localStorage, but some browsers have bug, which "supports" localstorage, but in practice there may even be low-level bug such as unable to setItem (). Therefore, I suggest that you can determine whether the browser supports localstorage by set/get the test data in the try/catch structure. Of course, remember to delete the test data after the test.

Browser compatibility

How to debug

In the Resources-Local Storage panel and Resources-Session Storage panel of the chrome developer tools, you can see the localstorage data under the current domain name.

Cannot repeat setItem () on ios device

In addition, there is sometimes a weird QUOTA_EXCEEDED_ERR error when setting setItem () on iPhone/iPad. In this case, removeItem () is usually ok before setItem.

The above is the content of this article on "what is the concept of localstorage in html5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.