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

Read storage content

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

Resource

recording username and password

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

for=""> Username: <input type="text" class="userName"/ >
</label>
<br/><br/>
<label for="">
Password: <input type="passw
ord" class="pwd"/> </label>
<br/><br/>
<label for="">
                                                                                                                                                                                                                                                                                      # <button>Login</button>

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