本地存储

1. 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案.
2. 本地存储特性
   

window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口下数据可以共享
3. 以键值对的形式存储使用
. ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200302163304213.png)
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200302164052344.png)
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200302164155922.png)
 清除所有数据
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200302164558325.png)

window.localStorage

1. 生命周期永久生效，除非手动删除否则关闭页面也会存在
2. 可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用
4. 使用与sessionStorage相同
   

 <input type="text" id="username"><input type="checkbox" name="" id="remember">记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
        //change事件，当remember发生改变的时候
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>

本地存储格式里面只能存储字符串的数据格式，把我们的数组对象转换为字符串格式 JSON.stringify()
获取本地存储的数据，我们需要把里面的字符串数据转换为 对象格式 JSON.parse()

数组的追加：arr.push();