06 本地存储数据

1.本地存储

为了满足各种各样的需求，会经常在本地存储大量的数据，HTML规范提出了相关解决方案。

1.1本都存储特性

本地存储特性

数据存储在用户浏览器中
设置读取方便，甚至页面刷新不丢失数据
容量较大，sessionStorage约5M、localStorage约20M
只能存储字符串，可以将对象JSON.stringify()编码后存储

1.2 window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口（页面）下数据可以共享

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

存储
sessionStorage.setItem(key,value)
获得
sessionStorage.getItem('uname')
删除
sessionStorage.removeItem('uname')
删除全部
sessionStorage.clear('uname')

1.3 window.localStorage

1、生命周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多个窗口（页面）下数据可以共享

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

演示记住用户名

<body>
    <input type="text" id="username"><input type="checkbox" name="" id="remeber"> 记住用户名
    <script>
        var username = document.querySelector('#username')
        var remeber = document.querySelector('#remeber')
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username')
            remeber.checked = true
        }
        remeber.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username')
            }
        })
    </script>
</body>