JS本地存储

本地存储特性

1.数据存储在用户浏览器中

2.设置，读取方便，页面刷新也不会丢失数据

3.容量较大，sessionStorage约5M，localStorage约20M

4.只能存储字符串，可以将对象JSON.stringify()编码后存储

window.sessionStorage

1.生命周期为关闭浏览器，即关闭浏览器窗口，数据生命周期结束

2.在同一个窗口(页面)下数据可以共享

3.以键值对形式存储使用

sessionStorage的使用

<script>
        let ipt = document.querySelector('input');
        let set = document.querySelector('.set');
        let get = document.querySelector('.get');
        let remove = document.querySelector('.remove');
        let del = document.querySelector('.del');
        set.addEventListener('click', function() {
            let val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('uage', val);
        });
        get.addEventListener('click', function() {
            console.log(sessionStorage.getItem('uname'));
        });
        remove.addEventListener('click', function() {
            sessionStorage.removeItem('uname');
        });
        del.addEventListener('click', function() {
            sessionStorage.clear();
        })
    </script>

 window.localStorage

1.生命周期永久生效，即关闭浏览器窗口，数据生命周期不结束，除非手动删除数据

2.可以多窗口(页面)共享数据(同一浏览器可以共享)

3.以键值对形式存储使用

localStorage的使用

localStorage的使用和sessionStorage使用相同

<script>
        let ipt = document.querySelector('input');
        let set = document.querySelector('.set');
        let get = document.querySelector('.get');
        let remove = document.querySelector('.remove');
        let del = document.querySelector('.del');
        set.addEventListener('click', function() {
            let val = ipt.value;
            localStorage.setItem('uname', val);
        });
        get.addEventListener('click', function() {
            console.log(slocalStorage.getItem('uname'));
        });
        remove.addEventListener('click', function() {
            localStorage.removeItem('uname');
        });
        del.addEventListener('click', function() {
            localStorage.clear();
        })
    </script>

change事件

当绑定事件的对象发生改变时侯，会进行事件内的内容

// 当复选框被选中，保存文本框中的数据，当复选框未被选中，清除刚才保存的数据内容
remember.addEventListener('change', function() {
    if (this.checked) {//被选中状态
        localStorage.setItem('username', username.value);
    } else {//未选中状态
        localStorage.removeItem('username');
    }
})