html5 web storage

In the past, we used document.cookie to store data locally, but because its storage size is only about 4K, The parsing is also very complicated, which brings a lot of inconvenience to development. But now html5 has web storage, which makes up for the shortcomings of cookies, and it is also quite convenient to open it

Web storage is divided into two categories

sessionStorage

The capacity is approx. It is about 5M, and the life cycle of this method is until the browser window is closed

##localStorage

The capacity is about 20M. The stored data will not expire when the user's browsing session expires, but will be deleted at the user's request. Browsers also delete them due to storage space limitations or security reasons. And the data stored in the type can be shared by multiple windows of the same browser

Notes: Only string can be stored. If it is jsonobject, the object can be JSON.stringify () Detailed explanation of the

method after encoding:

　

setItem(key, value) Set storage content

getItem(key)

Read storage content

removeItem(key)

Remove the key value to The storage content of key

　

clear() Clear all storage contents

Let’s do this Let me show you how he writes:

　　//更新
    function update() {
        window.sessionStorage.setItem(key, value);
    }    //获取
    function get() {
        window.sessionStorage.getItem(key);
    }    //删除
    function remove() {
        window.sessionStorage.removeItem(key);
    }    //清空所有数据
    function clear() {
        window.sessionStorage.clear();
    }

To check the effect, we take Google Chrome as an example:

The old version did not have Application, and the old version was

Resource

After storing the data

I will show you a classic example of

recording username and password

When the

checkbox for remember password is checked, the username and password do not need to be re-entered the next time you open it

html part:

for=""> Username:





Password: " class="pwd"/>




                                                                                                                                                                                                                                                                                      # Login

js part


##

  var userName=document.querySelector('.userName');    var pwd=document.querySelector('.pwd');    var sub=document.querySelector('button');    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){//        如果记住密码 被选中存储，用户信息
        if(ckb.checked){
            window.localStorage.setItem('userName',userName.value);
            window.localStorage.setItem('pwd',pwd.value);
        }else{
            window.localStorage.removeItem('userName');
            window.localStorage.removeItem('pwd');
        }//        否则清除用户信息    }

    window.onload=function(){//        当页面加载完成后，获取用户名，密码，填充表单
        userName.value=window.localStorage.getItem('userName');
        pwd.value=window.localStorage.getItem('pwd');
    }

The above is the detailed content of html5 web storage. For more information, please follow other related articles on the PHP Chinese website!