本地存储- Web storage (localStorage、sessionStorage)
localStorage 与 sessionStorage区别：
相同的使用方法(API)，不同的储存时效.
- 储存时效：localStorage 储存会持久化（没有储存时间）; sessionStorage 网页会话结束时失效（即网页关闭的时候，刷新没有问题）。
- 存储容量：localStorage 2~5Mb，sessionStorage 储存容量不一，部分浏览器不设限。
localStorage 临时存储：
- localStorage 是对象；
- API: setItem(key,val) 、getItem(key) 、remove(key)、 clear()、length ---设置、获取、移除、清空、获取内容个数；可书写为 对象.key = value 或 对象[key] = value
- localStorage.clear()---清空所有key；
- localStorage ：只能存储字符串。
sessionStorage：
- 相同url不同页面不能共享sessionStorage数据（只能在自己的标签页）；
- 网页会话结束时失效，刷新页面不会。
- 储存容量不一，部分浏览器没有限制；
使用 Storage 注意：
- 存储容量超出限制，抛出QutotaExceededError异常，存储值时应使用try catch避免异常未捕获；
- 只能存储字符串，注意类型转换；
- 失效时机，刷新页面不能使 sessionStorage 失效；
- 相同url不同标签页，不能共享sessionStorage数据；
web Storage 的优化
性能与存储容量大小无关，与读取次数有关。
- 减少item读取次数
- 单个item中尽可能多的存储数据
1.史莱姆小游戏：（存储实现打怪小案例）
注意：本案例img有设置margin-top为50%。body，有设置相对定位。html和body必须要height设置为100%，否则定位会失败。
2. 实现一个带有过期机制的loaclStorage（存储时效）
实现的功能需求：可以设置数据的储存时间，时效到后清除数据
本地存储- indexedDB (html5 数据库)
如何创建数据库和“表”
- 创建数据库： indexedDB(name, version)，version为版本号。然后在控制台刷新indexDB可查看到创建的该数据库, 点击Delete database 可清除该数据库。
设置主键的两种方法：
- 设置自增主键 - {autoIncrement: true}
- 取数据中字段作为主键 - {keyPath: 字段名}
如何使用事务获取表
- indexedDB --> transaction --> objectStore
事务的模式：
- 读写模式 - readwrite
- 只读模式 - readonly
关于表的增删改查的方法
- 增加数据 - IDBObjectStore.add(数据) (readonly时，是会报错的)
- 获取数据 - IDBObjectStore.get(key值)
- 获取所有数据 - IDBObjectStore.getAll() 数组的形式表现
- 继续添加数据 - IDBObjectStore.put(数据)
- 删除某一条数据 - IDBObjectStore.delete(key值)
- 清空数据 - IDBObjectStore.clear()
- 使用IDBObjectStore.onsuccess 执行查询完成后的回调(如果指令成功执行的回调函数)
- IDBObjectStore.result 获取查询结果(可以看到表中相关数据)
indexDB-索引
创建索引 IDBObjectStore.createIndex
- 可以使用存储记录中的值进行检索
- 索引自动更新
- 索引数据自动排序
indexDB-游标
创建游标：IDBObjectStore/IDBIndex.openCursor
- range 指定游标范围
- direction 游标的方向
