Cookie 的劣势
- 存储大小限制，仅 4kb 左右
- 单个域名下的数量限制，50个左右
- 污染请求头，浪费流量
本地存储 - Web Storage
localStorage 和 sessionStorage 区别
- 相同的使用方法
- 不同的存储时效
- 不同的储存容量
不同的存储时效
- localStorage 存储会持久化（没有储存时间）
- sessionStorage 存储会在网页会话结束后失效，刷新没有问题
不同的储存容量
- localStorage 容量一般在 2~5Mb 左右
- sessionStorage 存储容量不一，部分浏览器不设限
使用 Storage 时的注意点
存储容量超出限制
- 抛出 QuotaExceededError 异常
- 存储值时应使用 try catch 避免异常未捕获
存储类型的限制
- 仅能存储字符串
- 注意类型转换
sessionStorage 失效机制
- 刷新页面并不能使 sessionStorage 失效
- 相同 URL 不同标签页不能共享 sessionStorage
相同的使用方法 API
使用 setItem 方法设置存储内容
// 设置 localStorage
// key 和 value 可以是数字或者字符串，但字符串必须加引号，否则会报错
localStorage.setItem(key, value)
// localStorage 赋值
localStorage.key = value
// 如果 key 是字符串，用以下方式设置 localStorage，key必须要有引号包裹：localStorage['key']
localStorage['key'] = value
// 如果 key 是数字，用以下方式设置 localStorage，key可以不用引号包裹：localStorage[key]
localStorage[key] = value
使用 getItem 方法获取存储内容
// 获取 localStorage
localStorage.getItem(key)
// 这种方式也可以获取 localStorage
localStorage.sgl
localStorage['key']
// 如果 key 是数字，用以下方式无法获取 localStorage，
// 要用这种方法获取：
localStorage[key]
localStorage.getItem(key)
使用 removeItem 方法删除存储内容
// 删除 localStorage
localStorage.removeItem(key)
使用 clear 方法清除所有存储内容
// 清除所有 localStorage
localStorage.clear()
使用 length 属性获取存储内容的个数
// 获取存储内容的个数
localStorage.length
Web Storage 的优化
性能与存储容量大小无关，与读取次数有关
- 减少读取 item 的次数
- 单个 item 中尽可能多的存储数据
