How to use localStorage and sessionStorage-H5 Tutorial-php.cn

How to use localStorage and sessionStorage

php中世界最好的语言

Release： 2018-01-11 10:00:32

Original

2659 people have browsed it

This time I will show you how to use localStorage and sessionStorage, how to use localStorage and sessionStorage? What are the precautions when using localStorage and sessionStorage? The following is a practical case, let’s take a look.

1. What is localStorage and sessionStorage

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

2. Advantages and limitations of localStorage

Advantages of localStorage

1. localStorage expands the 4K limit of cookies

2.localStorage can store the second The data of a request is directly stored locally. This is equivalent to a 5M database for the front-end page. Compared with cookies, it can save bandwidth, but this is only supported in higher versions of browsers

Limitations of localStorage

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

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

3. localStorage is not readable 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 become stuck.

5.localStorage cannot be The crawler captured

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

Here we Use localStorage to analyze

3. The use of localStorage

Browser support for localStorage:

A special statement should be made here. If 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, it is not necessary. I came here 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, so we generally will not use it. Compatible

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

localStorage的写入，localStorage的写入有三种方法，这里就一一介绍一下
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

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

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 them, the official recommendation is getItem\setItem. These two methods are used to access it. Don’t ask me this. Why, because I don’t know this

I said before that localStorage is equivalent to a front-end database. The database mainly consists of four steps of adding, deleting, checking and modifying. The 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

It is easier to understand this step. The idea is the same as that of re-changing global variables. The values are the same, 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

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!