Html5 localStorage summary

In HTML5, a new LocalStorage feature is added. This feature is mainly used as a local storage to solve the problem of insufficient cookies storage space (the storage space of each cookie in Cookie is 4K), the general browser in LocalStorage general browser It supports 5M size, which will be different in different browsers.

1. LocalStorage expands the 4K limit of Cookie

2. LocalStorage can directly store the first request data to the local area. This is equivalent to a database that is 5m on the front -end page. Compared with Cookie, it can save bandwidth, but this is only a high version of the browser. Support

1. The size of the browser is not uniform, and the IE version above IE8 only supports the attribute of LocalStorage

2. At present, all browsers will limit the value type of LocalStorage as String type. This JSON object type that is common in our daily life requires some conversion

3. LocalStorage is unable to read under the privacy mode of the browser

4. LocalStorage is essentially read on the string. If the stored content is stored, it will consume memory space, which will cause the page to change the card

5. LocalStorage cannot be caught by crawlers

The only difference between LocalStorage and SessionStorage is that LocalStorage belongs to permanent storage, and sessionStorage belongs to the end of the session.

Here we use localStorage to analyze

Here is a special statement. If you use the IE browser, then use USERDATA as a storage. The main explanation here is the content of LocalStorage, so UserData does not explain too much, and with the personal opinion of the blogger, there is no opinion on the blogger. It is necessary to learn the use of UserData, because the current IE6/IE7 belongs to the position of the elimination, and the development of many pages today will involve emerging technologies such as HTML5/CSS3. Compatible

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

 if (! Window.localStorage) {Alert (browser supports localStorage); Return false;} else {// main logic business}

There are three ways to write LocalStorage, LocalStorage's writing. Here we will introduce them one by one

 if (! Window.localStorage) {Alert (browser supports localStorage); Return false;} Else {var Storage = Window.LocalStorage; // Write into the A field storage [a] = 1; // Write into the B field s torage. a = 1; // Write into the C field storage.setItem (c, 3); console.log (typeof storage [a]); console.log (typeof storage [b]); console.log (Typeof Storage [C] );}

The results after runtime are as follows:

Here we should specifically explain that the use of LocalStorage also follows the same -the -origin strategy, so different websites can not share the same LocalStorage

Finally, the result printed on the console is:

I don't know if readers have noticed that the INT type has just been stored, but the printing is string. This is related to the characteristics of LocalStorage itself. LocalStorage only supports String type storage.

 if (! Window.localStorage) {Alert (browser supports localStorage);} else {var storage = window.localstorage; // Write into a field storage [a] = 1; // Write in b field storage.a = 1 ; // Write into the c field storage.setItem (c, 3); console.log (typeof storage [a]); console.log (typeof storage [b]); console.log (typeof storage [c]); / /The first method read var a = storage.a; console.log (a); // The second method read var b = storage [b]; console.log (b); // The third method Read var c = storage.getITEM (c); console.log (c);}

This is three ways to read LocalStorage. Among them

I said before that LocalStorage is equivalent to a front -end database. The database is mainly the four steps of adding, deletion, investigation and reform. The reading and writing here are equivalent

Let's talk about the two steps of the delete and change of LocalStorage.

It's better to understand this step. The idea is the same as the value of changing the global variable again. Here we use one as an example to briefly explain

 if (! Window.localStorage) {Alert (browser supports localStorage);} else {var storage = window.localstorage; // Write into a field storage [a] = 1; // Write in b field storage.b = 1 = 1 ; // Write into the 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]); /*segmentation line* / storage.a = 4; console.log (storage.a);}

On this console, we can see that the A key has been changed to 4

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 in LocalStorage

 var storage = window.localstorage; storage.a = 1; storage.setItem (c, 3); console.log (storage.removeItem (a); console.log (storage.a);

The console view results

 var storage = window.localstorage; storage.a = 1; storage.setItem (c, 3); for (var I = 0; i <storage.length; i ++) {var key = storage.key (i); Then, then log (key);}

Use the key () method to obtain the corresponding key from the index of the in -and -out index

Generally, we will store JSON in LocalStorage, but LocalStorage will automatically convert LocalStorage into string forms.

At this time, we can use JSON.STRINGIFY () to convert JSON into json string

Example:

 if (! Window.localStorage) {Alert (browser supports localStorage);} Else {var storage = window.localstorage; var data = {name: 'xiecanyong', sex: 'man', hob by: 'Program'}; VAR d = json.stringify (data); storage.setItem (data, d); console.log (storage.data);}

After reading, the json string must be converted into a JSON object, and the json.parse () method is used to use the json.parse () method

 var storage = window.localstorage; var data = {name: 'xiecanyong', sex: 'man', hobby: 'program'}; var d = json.stringify (data); m (data, d); / /Convert json string into json object output var json = storage.getItem (data); var jsonObj = json.parse (json); console.log (Typeof jsonobj);

Print it is Object object

Another thing to note is that other types must be read out.

The above is the summary of the HTML5 LOCALSTORAGE use of the editor. 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!