Summary of use of localStorage and sessionStorage

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

1. localStorage expands the 4K limit of cookies

2. LocalStorage can directly store the first requested data locally. This is equivalent to a 5M database for the front-end page. Compared with cookies, it can save bandwidth, but this is only available in high-end browsers. Supported by Zhongcai

1. Browsers are not uniform in size, and the localStorage attribute is only supported in IE versions above IE8.

2. Currently, all browsers limit the value type of localStorage to string type. This requires some conversion for our daily common JSON object types.

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

4. LocalStorage essentially reads strings. If you store a lot of content, it will consume memory space and cause the page to become stuck.

5. localStorage cannot be crawled by crawlers

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

Here we use localStorage to analyze

Browser support for localStorage:

A special statement here is that if you are using IE browser, then UserData will be used as storage. The main explanation here is the content of localStorage, so userData will not be explained too much, and in the blogger's personal opinion, there is no It is necessary to learn the use of UserData, because the current IE6/IE7 is in the phase of elimination, and many page development today involves emerging technologies such as HTML5/CSS3, so we generally do not use it. for compatibility

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

 if(!window.localStorage){ alert(browser supports localstorage); return false; }else{ //Main logic business}

There are three methods for writing to localStorage. Here we will 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 the c field storage.setItem(c,3); console.log(typeof storage[a]); console.log(typeof storage[b]); console.log(typeof storage[c]); }

The result after running is as follows:

It should be noted here that the use of localStorage also follows the same-origin policy, so different websites cannot directly share the same localStorage.

The final result printed on the console is:

I don’t know if any readers have noticed that what was just stored was of type int, but it was printed as type of string. This is related to the characteristics of localStorage itself. LocalStorage only supports storage of string type.

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 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 reads var a=storage.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. The officially recommended methods are getItem/setItem to access it. Don’t ask me why, because I don’t know.

I have said before that localStorage is equivalent to a front-end database. The database mainly consists of four steps: addition, deletion, and query. The reading and writing here are equivalent to the two steps of addition and query.

Now let’s talk about the two steps of deleting and modifying localStorage.

Changing this step is easier to understand. The idea is the same as changing the value of a global variable. Here we will use an example to briefly explain it.

 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 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]); /*Separation 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 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 results on the console

localStorage key acquisition

 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); }

Use the key() method to get the corresponding key by entering and exiting the index.

4. Other considerations for localStorage

Generally we will store JSON in localStorage, but localStorage will automatically convert localStorage into string form.

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

Example:

 if(!window.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); }

After reading, to convert the JSON string into a JSON object, 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 into JSON object output var json=storage.getItem(data); var jsonObj=JSON.parse(json); console.log(typeof jsonObj);

Printed out is an Object object

Another thing to note is that other types must be converted when they are read.