LocalStorage, sessionStorage

In HTML5, a new localStorage feature is added. This feature is mainly used as localStorage to solve the problem of insufficient cookie storage space (the storage space of each cookie in cookie is 4k). The size of localStorage is generally supported by the browser is 5M. This will vary between browsers.

2. Advantages and limitations of localStorage

The advantage of localStorage

1. LocalStorage expands the 4K limit of cookies

2, localStorage will be able to store the first request data directly to the local, which is equivalent to a 5M size for the front-end page database, compared to cookie can save bandwidth, but this is only supported in the older version of the browser

The limitations of localStorage

1, the size of the browser is not uniform, and THE Internet Explorer version in IE8 or later only support the localStorage property

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

3. LocalStorage is unreadable under the browser’s privacy mode

4, localStorage is essentially a string read, if the storage content will consume memory space, will lead to page card

5. LocalStorage cannot be captured by crawlers

The only difference between localStorage and sessionStorage is that localStorage is a permanent storage, whereas sessionStorage is a key/value pair that is cleared when the session ends

Here we use localStorage to analyze

Three, the use of localStorage

LocalStorage browser support:

Here to declare that, if you use IE browser, then UserData as storage, here mainly explains the content of localStorage, so UserData does not do too much explanation, and in the personal view of the blogger, there is no need to learn the use of UserData, Because the current IE6/IE7 belongs to the position of the obsolescence, and in today’s many page development will involve HTML5\CSS3 and other emerging technologies, so in the use of the above generally we will not go to its compatibility

First, when using localStorage, we need to determine whether the browser support localStorage property

If (! LocalStorage){alert(" Browser supports localStorage "); return false; }else{// main logical business}Copy the code

LocalStorage write, localStorage write there are three methods, here is a brief introduction

If (! LocalStorage){alert(" Browser supports localStorage "); return false; }else{ var storage=window.localStorage; Storage ["a"]=1; Storage. A =1; SetItem ("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); }Copy the code

The result after running is as follows:

In particular, the use of localStorage also follows the same origin policy, so different websites can not directly share the same localStorage

The final result printed on the console is:

I don’t know if you have noticed that the type just stored is int, but the type printed is string, this is related to the characteristics of localStorage itself, localStorage only supports string storage.

LocalStorage read

if(! LocalStorage){alert(" Browser supports localStorage "); }else{ var storage=window.localStorage; Storage ["a"]=1; Storage. A =1; SetItem ("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); Var a=storage.a; console.log(a); Var b=storage["b"]; console.log(b); Var c= storage.getitem ("c"); console.log(c); }Copy the code

GetItem \setItem: getItem\setItem: getItem\setItem: getItem\setItem: getItem\setItem: getItem\setItem

I said before localStorage is equivalent to a front-end database, database is mainly add delete check change these four steps, here read and write is equivalent to add, check these two steps

Let’s talk about localStorage delete, change these two steps

Changing this step is easier to understand, the idea is the same as changing the value of a global variable, here we use an example to briefly illustrate

if(! LocalStorage){alert(" Browser supports localStorage "); }else{ var storage=window.localStorage; Storage ["a"]=1; Storage. B =1; SetItem ("c",3); console.log(storage.a); // console.log(typeof storage["a"]); // console.log(typeof storage["b"]); // console.log(typeof storage["c"]); A = 1; console.log(storage.a); }Copy the code

This is on the console and we can see that the A key has been changed to 4

The deletion of the localStorage

1. Clear all contents of localStorage

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);
Copy the code

2. Delete a key/value pair from localStorage

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);
Copy the code

Console View result

Obtain the key of localStorage

var storage=window.localStorage; storage.a=1; storage.setItem("c",3); for(var i=0; i<storage.length; i++){ var key=storage.key(i); console.log(key); }Copy the code

To retrieve the corresponding key, use the key() method

4. Other precautions for localStorage

JSON is normally stored in localStorage, but localStorage automatically converts localStorage to a string

At this point we can use the json.stringify () method to convert JSON to a JSON string

Example:

if(! LocalStorage){alert(" Browser supports localStorage "); }else{ var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; var d=JSON.stringify(data); storage.setItem("data",d); console.log(storage.data); }Copy the code

To convert the JSON string to a JSON object after reading it, use the json.parse () method

var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; var d=JSON.stringify(data); storage.setItem("data",d); // Convert JSON string to JSON object var JSON = storage.getitem ("data"); var jsonObj=JSON.parse(json); console.log(typeof jsonObj);Copy the code

It prints out as an Object

It is also important to note that other types are also converted when they are read