Summary of HTML5 localStorage knowledge points-H5 Tutorial-php.cn

This article mainly shares with you a summary of HTML5 localStorage knowledge points. In HTML5, a new localStorage feature has been added. This feature is mainly used as local storage and solves the problem of insufficient cookie storage space (in cookies The storage space of each cookie is 4k). Generally, browsers support a size of 5M in localStorage. This localStorage will be different in different browsers.

1. What is localStorage , sessionStorage

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

2. Advantages and limitations of localStorage

Advantages of localStorage

1. LocalStorage expansion Overcoming the 4K limit of cookies

2. LocalStorage will be able to store the first requested data directly locally. This is equivalent to a 5M database for the front-end page. Compared with cookies, it can save bandwidth. However, this is only supported in higher version browsers.

Limitations of localStorage

1. The sizes of browsers are not uniform, and in IE8 or above Only the IE version supports the localStorage attribute

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

3. LocalStorage cannot be read in the privacy mode of the browser.

4. LocalStorage essentially reads strings. If there is a lot of stored content, it will consume memory space and cause the page to change. Card

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 the key value in sessionStorage when the session ends. The pairs will be emptied

Here we use localStorage to analyze

3. The use of localStorage

localStorage Browser support:

A special statement should be made here. 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 used. Many explanations, and in the blogger's personal opinion, there is no need to learn the use of UserData, because the current IE6/IE7 is in the phase of elimination, and many page development today will involve emerging technologies such as Html5\CSS3 technology, so generally we will not make it compatible when using the above

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

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务
        }

Copy after login

There are three ways to write localStorage. Here we will introduce them one by one.

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

Copy after login

The results after running are 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 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("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.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 after login

There are three ways to read localStorage, among which the officially recommended one is getItem\ The two methods setItem are used to access it. Don’t ask me why, because I don’t know this either

I said before that localStorage is equivalent to a front-end database. The database is mainly for additions, deletions, and changes. These four steps, reading and writing here are equivalent to the two steps of adding and checking.

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 global variables. Here we will take an example to briefly explain

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            // console.log(typeof storage["a"]);
            // console.log(typeof storage["b"]);
            // console.log(typeof storage["c"]);
            /*分割线*/
            storage.a=4;
            console.log(storage.a);
        }

Copy after login

This is in the console Above 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);

Copy after login

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

Copy after login

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

Copy after login

Use the key() method and enter and exit the index to obtain the corresponding key

4. Other notes on 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("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:&#39;xiecanyong&#39;,
                sex:&#39;man&#39;,
                hobby:&#39;program&#39;
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

Copy after login

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
            var data={
                name:&#39;xiecanyong&#39;,
                sex:&#39;man&#39;,
                hobby:&#39;program&#39;
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

Copy after login

打印出来是Object对象

另外还有一点要注意的是，其他类型读取出来也要进行转换