HTML5的本地存储与离线存储

1.本地存储 - Web storage
2.本地存储 - indexedDB
3.本地存储的扩展
4.离线存储app ache

存储的需求

1.移动端环境因素-响应慢体验差
2.流量因素 客户端存储节省流量节省金钱
3.追求原生体验

Cookie的局限性

1.存储大小限制 仅4k左右
2.单域名数量限制 50个左右
3.污染请求头，浪费流量

认识localStorage 和 sessionStorage

相同的存储方式

1.使用setItem方法设置存储内容
2.使用getItem方法获取存储内容
3.使用removeItem方法删除存储内容
4.使用clear方法清除所有内容
5.使用length属性获取存储内容的个数
6.使用key方法获取存储字段

不同的存储时效

1.localStorage持久化，不会随着浏览器的关闭而失效
2.sessionStorage会随着网页会话结束而失效

不同的存储容量

1.localStorage容量一般2-5Mb左右
2.sessionStorage存储流量不一，部分浏览器不设限

localStorage使用方法

设置localStorage数据
localStorage.setItem('site','imooc')
获取localStorage数据
localStorage.getItem('site')
删除localStorage数据
localStorage.removeItem('site')
清空数据
localStorage.clear()
获取个数
localStorage.length
获取存储第一个字段
localStorage.key(0)

sessionStorage使用方法

设置sessionStorage数据
sessionStorage.setItem('site','imooc')
获取sessionStorage数据
sessionStorage.getItem('site')
删除sessionStorage数据
sessionStorage.removeItem('site')
清空数据
sessionStorage.clear()
获取个数
sessionStorage.length
获取存储第一个字段
sessionStorage.key(0)

使用Storage的注意点

1.注意存储容量超出配额 超出后会抛出异常
2.存储类型的限制，仅能存储字符串 隐式的类型转换
3.sessionStorage失效机制
-刷新页面不会失效
-同一个域名下的不同标签不共享

带有过期机制的localStorage

1.可以设置数据的存储时间
2.过期数据清理
3.自行维护存储空间
git地址：https://github.com/yelingkong/h5_js_study/tree/master/Storage

indexedDB数据库介绍

1.indexedDB是一种事务性数据库
2.NoSQL数据库
3.使用js对象存储数据

如何创建数据库

1.indexedDB.open创建数据库
2.open方法会返回IDBRequest对象

创建一个数据库名为testDB版本号为1的indexedDB数据库
indexedDB.open('testDB',1)
删除数据库名为testDB的数据库
indexedDB.deleteDatabase('testDB')

indexedDB如何创建表

1.indexedDB.createObjectStore 创建 ObjectStore
2.createObjectStore设置主键类型

表的增删改查

1.增加数据 -IDBObjectStore.add
2.获取数据 -IDBObjectStore.get
3.获取全部数据 -IDBObjectStore.getAll
4.修改数据 -IDBObjectStore.put
5.删除数据 -IDBObjectStore.delete
6.清除所有数据 -IDBObjectStore.clear

IDBRequest对象

1.使用IDBRequest.onsuccess绑定查询完成事件
2.使用IDBRequest.result获取查询结果
3.使用IDBRequest.onerror绑定查询失败事件

IDBObjectStore key的两种类型

1.设置自增主键- {autoIncrement:true}
2.取数据中字段作为主键 - {keyPath:字段名}

IDB创建索引

IDBObjectStore createIndex 的参数
-indexName
-keyPath:索引字段 可以为空或者数组
-optionParameters 可选参数

optionParameters可选值

1.unique表示keyPath字段是否唯一
2.multiEntry表示是否为keyPath每一个项创建索引数据

索引的相关方法

1.查询数据IDBIndex.get
2.查询所有数据IDBIndex.getAll
3.打开游标 IDBIndex.openCursor

游标

如何创建游标

IDBObjectStore/IDBIndex.openCursor
-接受可选参数range和direction
-返回一个IDBRequet对象
-该IDBRequet对象的结果是一个IDBCursor对象

indexedDB与web Storage

indexedDB的优势

1.存储类型更加丰富
2.可以在Web Workers中使用
3.可以实现高级查询
4.存储容量更大

Web Storage的优势

1.api较少，更容易掌握
2.兼容性更好

IndexedDB的兼容性

1.ios 8 9 的webview不支持indexedDB的api
2.ff单次存储Blob数据超过50M会抛出异常
3.safari 的indexedDB不能用于web workers

其他存储方式

1.webSQL 兼容性问题严重
2.Filesystem & FileWriter API 兼容性问题严重
3.UserData ie独有的存储方式

离线存储Application cache

Application cache的功能

1.可永久存储资源
2.被存储的资源可供离线使用
3.可通过配置文件修改存储策略

manifest的文件配置

1.文件开头必须有CACHE MANIFEST标记
2.使用CACHE作为缓存标记
3.网络请求标记 NETWORK

CACHE MANIFEST

#VERSION 1.0

CACHE:
test.js
test.jpg

FALLBACK:

NETWORK:
*

Application cache的不足之处

1.文件总是来自缓存，即便是在线环境
2.更新后只有更新manifest配置文件更新后，资源才会被更新
3.别忘记给缓存文件加上http缓存控制
4.未被缓存的文件必须在配置文件NETWORK中指明
5.无法分辨响应式资源

service worker的功能

1.离线缓存
2.消息推送
3.后台消息传递
4.网络代理 转发相应 伪造相应

service worker 如何实现离线缓存

1.安装一个service worker
2.监听install 并存储文件
3.监听fetch事件 并返回被存储的文件

image.png

service worker离线存储的优势

1.更细致的控制存储资源
2.更强大的更新机制

service worker 的现状

1.规范处于草案状态
2.使用需要成本 必须要https下
3.兼容性不佳