离线存储
sessionStorage
sessionStorage允许你访问一个 对应当前源得sessionStorage对象 它与localStorage相似 不同之处在于localStorage里面 存储的数据没有过期时间设置 而存储在sessionStorage里面的数据在页面会话结束时会被清除
- 页面会话在浏览器打开期间一直保持 并重新加载或恢复页面仍然保持原来的页面会话
- 在新标签或新窗口打开的一个页面会复制顶级浏览会话的上下文作为新会话的上下文 这点和 session cookies 运行方式不同
- 打开多个相同的URL的Tabs页面 会创建各自的
sessionStorage - 关闭对应浏览器tab 会清除对应的
sessionStorage语法
1
2
3
4
5
6
7
8
9
10
11// 保存数据到 sessionStorage
sessionStorage.setItem('key',value)
// 从 sessionStorage 获取数据
sessionStorage.getItem('key')
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key')
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear()localStorage
只读的
localStorage属性允许你访问一个Document源（origin）的对象Storage;存储的数据将保存在浏览器会话中localStorage类似sessionStorage,但其区别在于：存储在localStorage的数据可以长期保留;而当页面会话结束 也就是页面关闭时 存储在sessionStorage内的数据就会被清除
应注意 无论数据存储在localStorage还是sessionStorage他们都特定于页面的协议
另外,localStorage中的键值对总是以字符串的形式存储 （和js对象相比 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型）语法
1
2
3
4
5
6
7
8
9
10
11// 保存数据到 localStorage
localStorage.setItem('key','value')
// 从 localStorage 获取数据
localStorage.getItem('key')
// 从 localStorage 删除所保存的数据
localStorage.removeItem('key')
// 从 localStorage 删除所有保存的数据
localStorage.clear()cookie
获取并设置与当前文档相关联的cookie 建议使用一个通用的库 来操作 cookie
例如 js-cookie(https://www.npmjs.com/package/js-cookie)
webSql
indexDB
IndexDB是一种底层API,用于客户端存储大量结构化数据（文件/二进制大型对象（blobs））该API使用索引来实现对数据得高性能搜索 虽然web Storage 对于存储较少量数据很有用 但是对于存储更大量的结构化数据来说 这种方法不太好用 所以IndexDB提供了一种解决方案
详细使用方法
(https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)
