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>
