本地存储1

1. 本地存储

本地存储特性

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

2. window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在统一窗口（页面）下数据可以共享
3. 以键值对形式存储
   存储数据sessionStorage.setItem(key,value)
   获取数据sessionStorage.getItem(key)
   删除数据sessionStorage.removeItem(key)
   删除所有数据sessionStorage.clear()

window.localStorage

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

存储数据localStorage.setItem(key,value)
获取数据localStorage.getItem(key)
删除数据localStorage.removeItem(key)
删除所有数据localStorage.clear()

案例 记住用户名

如果勾选居住用户名，下次打开浏览器，就在文本框自动显示上次登陆的用户名
案例分析

1. 把数据存储起来，用到本地存储
2. 关闭页面，也可以显示用户名，所以用到localStorage
3. 打开页面，先判断是否有这个用户名，如果有就在表单显示用户名，并且勾选复选框
4. 当复选框发生改变change事件
5. 如果勾选，就存储，不勾选就删除