HTML5 localStorage usage summary, html5localstorage

HTML5 localStorage usage summary, html5localstorage

1. What is localStorage and sessionStorage?

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

Ii. advantages and limitations of localStorage

Advantages of localStorage

1. localStorage expands the cookie's 4 K limit

2. localStorage can directly store the data requested for the first time locally. This is equivalent to a database of 5 MB in size for the front-end page, which can save bandwidth compared with cookies, however, this is only supported by browsers of the higher version.

Limitations of localStorage

1. the browser size is not uniform, and the localStorage attribute is supported only in IE Versions later than IE8.

2. Currently, all browsers limit the value type of localStorage to the string type, which requires some conversions for common JSON object types.

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

4. localStorage is essentially a string reading function. If the storage content is large, the memory space will be consumed, resulting in page card-changing.

5. localStorage cannot be crawled by crawlers.

The only difference between localStorage and sessionStorage is that localStorage is a permanent storage, and sessionStorage is used to clear key-value pairs in sessionStorage when the session ends.

Here we use localStorage for analysis

Iii. Use of localStorage

LocalStorage browser support:

It should be specifically stated here that if you use IE browser, UserData should be used for storage. Here we mainly explain the content of localStorage, so userData will not be explained too much, in addition, in the opinion of bloggers, it is not necessary to learn how to use UserData, because the current IE6/IE7 is the elimination location, in addition, many of today's page development involves emerging technologies such as Html5 and CSS3, So we generally do not use them for compatibility.

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

If (! Window. localStorage) {alert ("localstorage supported by browsers"); return false;} else {// main logical business}

There are three methods for writing localStorage to localStorage. Here we will introduce them one by one.

If (! Window. localStorage) {alert ("localstorage supported by the browser"); 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 running result is as follows:

The usage of localStorage follows the same-origin policy. Therefore, different websites cannot share the same localStorage.

The result printed on the console is:

I wonder if you have noticed that the int type is stored, but the string type is printed. This is related to the characteristics of localStorage. localStorage only supports string type storage.

LocalStorage reading

If (! Window. localStorage) {alert ("localstorage supported by the browser");} 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); // method 2 read var B = storage ["B"]; console. log (B); // The third method reads var c = storage. getItem ("c"); console. log (c );}

There are three methods to read localStorage. The official recommendation is getItem \ setItem to access it. Don't ask me why, because I don't know why.

I have said before that localStorage is equivalent to a front-end database. The database mainly involves the four steps of addition, deletion, query, and modification. The read and write operations here are equivalent to the two steps of addition and query.

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

This step is easy to understand. The idea is the same as changing the value of the global variable. Here we will take an example to briefly describe it.

If (! Window. localStorage) {alert ("localstorage supported by the browser");} 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"]);/* split line */storage. a = 4; console. log (storage. a );}

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

Delete localStorage

1. Clear all content 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

Obtain the localStorage key

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 obtain the corresponding key from the index.

IV. Other considerations for localStorage

Generally, JSON is stored in localStorage, but localStorage automatically converts localStorage into a string.

In this case, we can use JSON. stringify () to convert JSON into a JSON string.

Example:

If (! Window. localStorage) {alert ("localstorage supported by the browser");} else {var storage = window. localStorage; var data = {name: 'xiecanyong ', sex: 'man', holobby: 'program '}; var d = JSON. stringify (data); storage. setItem ("data", d); console. log (storage. data );}

After reading the data, convert the JSON string to a JSON object using the JSON. parse () method.

Var storage = window. localStorage; var data = {name: 'xiecanyong ', sex: 'man', holobby: 'program '}; var d = JSON. stringify (data); storage. setItem ("data", d); // converts a JSON string into a JSON object and outputs var json = storage. getItem ("data"); var jsonObj = JSON. parse (json); console. log (typeof jsonObj );

Printed as an Object

Another point to note is that conversion is also required for reading other types.

The above is a summary of the use of HTML5 localStorage. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!