Shulou(Shulou.com)06/03 Report--

This article mainly shows you "what is the use of localStorage in HTML5", the content is simple and clear, hoping to help you solve your doubts, the following let the editor lead you to study and learn "what is the use of localStorage in HTML5" this article.

In HTML5, a new localStorage feature is added, which is mainly used as local storage, which solves the problem of insufficient storage space in cookie (the storage space of each cookie in cookie is 4k). In localStorage, browsers generally support a size of 5m, which varies in different browsers.

What is localStorage and sessionStorage

In HTML5, a new localStorage feature is added, which is mainly used as local storage, which solves the problem of insufficient storage space in cookie (the storage space of each cookie in cookie is 4k). In localStorage, browsers generally support a 5m size, which varies from browser to browser.

II. Advantages and limitations of localStorage

Advantages of localStorage

1. LocalStorage extends the 4K limit of cookie.

2. LocalStorage will be able to store the data requested for the first time directly locally, which is equivalent to a 5m-sized database for front-end pages. Compared with cookie, it can save bandwidth, but this is only supported in high-version browsers.

Limitations of localStorage

1. The size of browsers is not uniform, and the attribute localStorage is only supported in IE versions above IE8.

2. At present, all browsers limit the value type of localStorage to string type, which requires some conversion for the JSON object type that is common in our daily life.

3. LocalStorage is not readable in the browser's privacy mode.

4. LocalStorage is essentially the reading of strings. If you store too much content, it will consume memory space and cause the page to become stuck.

5. LocalStorage cannot be crawled by reptiles

The only difference between localStorage and sessionStorage is that localStorage belongs to permanent storage, while sessionStorage belongs to. When the session ends, the key-value pairs in sessionStorage are emptied.

Here we use localStorage to analyze

III. The use of localStorage

Browser support for localStorage:

I would like to make it clear here that if you are using an IE browser, then UserData will be used as storage. Here we mainly talk about the content of localStorage, so userData does not explain too much, and from the personal point of view of bloggers, it is not necessary to learn the use of UserData, because the current IE6/IE7 belongs to the obsolete position, and many page development today will involve emerging technologies such as Html5\ CSS3. Therefore, in general, we will not be compatible with it when using it.

First of all, when using localStorage, we need to determine whether the browser supports the attribute localStorage.

If (! Window.localStorage) {alert ("browser supports localstorage"); return false;} else {/ / main logic business}

There are three ways to write localStorage and localStorage. Let's introduce them one by one.

If (! Window.localStorage) {alert ("browser supports localstorage"); return false;} else {var storage=window.localStorage; / / write a field storage ["a"] = 1; / / write b field storage.a=1; / / write c field storage.setItem ("c", 3) Console.log (typeof storage ["a"]); console.log (typeof storage ["b"]); console.log (typeof storage ["c"]);}

The results are as follows:

In particular, I would like to note that the use of localStorage also follows the same origin policy, so different websites cannot share the same localStorage directly.

The final result printed on the console is:

I do not know if readers have noticed, just stored in the int type, but printed out is the string type, which is related to the characteristics of localStorage itself, localStorage only supports string type storage.

Reading of localStorage

If (! window.localStorage) {alert ("browser supports localstorage");} else {var storage=window.localStorage; / / write a field storage ["a"] = 1; / / write b field storage.a=1; / / write c field storage.setItem ("c", 3) Console.log (typeof storage ["a"]); console.log (typeof storage ["b"]); console.log (typeof storage ["c"]); / / the first method reads var astorage.a; console.log (a); / / the second method reads var b=storage ["b"] Console.log (b); / / the third method reads var c=storage.getItem ("c"); console.log (c);}

There are three ways to read localStorage, among which the official recommendation is getItem\ setItem. Don't ask me why, because I don't know.

As I said before, localStorage is the equivalent of a front-end database. The database is mainly composed of the four steps of adding, deleting, checking and correcting. The reading and writing here are equivalent to the two steps of adding and checking.

Let's talk about the two steps of deleting and changing localStorage.

Changing this step is easier to understand. The idea is the same as changing the value of a global variable. Let's take an example to explain it briefly.

If (! window.localStorage) {alert ("browser supports localstorage");} else {var storage=window.localStorage; / / write a field storage ["a"] = 1; / / write b field storage.b=1; / / write c field storage.setItem ("c", 3) Console.log (storage.a); / / console.log (typeof storage ["a"]); / / console.log (typeof storage ["b"]); / / console.log (typeof storage ["c"]); / * split line * / storage.a=4; console.log (storage.a);}

On the console, we can see that the a key has been changed to 4.

Deletion of localStorage

1. Clear all the contents of localStorage

Var storage=window.localStorage; storage.a=1; storage.setItem ("c", 3); console.log (storage); storage.clear (); console.log (storage)

2. Delete a key-value pair in localStorage

Var storage=window.localStorage; storage.a=1; storage.setItem ("c", 3); console.log (storage); storage.removeItem ("a"); console.log (storage.a)

View the results in the console

Key acquisition of localStorage

Var storage=window.localStorage; storage.a=1; storage.setItem ("c", 3); for (var item0)

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.