1. 简介
webstorage 是本地存储, 存储在客户端, 包括 localStorage 和 sessionStorage.
localStorage
localStorage 生命周期是永久, 这意味着除非用户显示在浏览器提供的 UI 上清除 localStorage 信息, 否则这些信息将永远存在. 存放数据大小为一般为 5MB, 而且它仅在客户端 (即浏览器) 中保存, 不参与和服务器的通信.
sessionStorage
sessionStorage 仅在当前会话下有效, 关闭页面或浏览器后被清除. 存放数据大小为一般为 5MB, 而且它仅在客户端 (即浏览器) 中保存, 不参与和服务器的通信. 源生接口可以接受, 亦可再次封装来对 Object 和 Array 有更好的支持.
2. 用法
localStorage 和 sessionStorage 使用时使用相同的 API, 都是以 key-value 的形式存储:
- localStorage.setItem("key","value");// 以 "key" 为名称存储一个值 "value"
- localStorage.getItem("key");// 获取名称为 "key" 的值
- localStorage.removeItem("key");// 删除名称为 "key" 的信息.
- localStorage.clear();?// 清空 localStorage 中所有信息
3. 区别与注意事项
(1)作用域不同
不同浏览器无法共享 localStorage 或 sessionStorage 中的信息. 相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口), 但是不同页面或标签页间无法共享 sessionStorage 的信息. 这里需要注意的是, 页面及标 签页仅指顶级窗口, 如果一个标签页包含多个 iframe 标签且他们属于同源页面, 那么他们之间是可以共享 sessionStorage 的.
(2)数据类型
存储的数据类型必须是 String 类型, 如果存储的数据类型是 Object 对象的时候, 要通过 JSON.stringify(obj)转换为 String 类型, 获取之后再通过 JSON.parse(strData)解析.
来源: https://www.2cto.com/kf/201807/760181.html