早期 web 使用 cookie 在浏览器端保存数据, 但存在以下问题:
cookie 的大小限制在 4KB
浏览器会限制所有站点在计算机上的存储 cookie 总数
cookie 会随着每次 HTTP 事务一起发送, 会浪费一部分带宽
html5 提供了 WebStorage 本地存储, IndexedDB 本地数据库等, 能够存储更多更复杂的数据.
一, WebStorage
WebStorage 以 Key-Value 对的方式存储, 容量有 5M, 分为两种:
永久性的本地存储 localStorage, 可以永久存储在浏览器端
会话级别的本地存储 sessionStorage, 关闭浏览器窗口数据会清空
浏览器支持: 除了 IE7 及更早版本, 其它浏览器均可支持
检查浏览器是否支持:
- if(typeof(Storage) !== "undefined")
- {
- // 支持
- }else
- {
- // 不支持
- }
操作 API:
以下方法均用 loaclStorage 或 sessionStorage 调用
getItem(key) <=> sessionStorage.Key 获取值
setItem(key,value) <=> sessionStorage.Key = value 设置值
removeItem(key)
length 返回 key/value 列表的长度
key(index) 返回对应索引的 key 值
clear() 清空存储(删除所有 key/value 对)
遍历:
- var se = Windows.sessionStorage;
- for(var i=0;i<se.length;i++)
- {
- console.log("{0}:{1}\n".format(se.key(i),se.getItem(se.key(i))));
- }
二, IndexedDB
与 WebStorage 使用简单字符串键值对不同, IndexedDB 是为了能够在客户端储存大量的结构化数据, 并使用索引高效检索的 API. 前者适合存储少量的数据, 对于存储大量结构化的数据, 则可使用 IndexedDB 本地数据库.
浏览器兼容性: 所有主流浏览器都已兼容.
基本概念
数据库: IDBDatabase 对象 每个域名 (严格的说是协议 + 域名 + 端口) 都可以新建任意多的数据库. 同一个时刻只能有一个版本的数据库存在
对象仓库: IDBObjectStore 对象 每个数据库包含若干个对象仓库, 类似于关系型数据库中的表格
数据记录: 对象仓库保存的是数据记录, 只有主键和数据体两部分. 数据体可以是任意数据类型.
索引: IDBIndex 对象 数据记录的读写和删改, 都要通过事务完成. 事务对象提供 error,abort 和 complete 三个事件, 用来监听操作结果.
事务: IDBTransaction 对象
操作请求: IDBRequest 对象
指针: IDBCursor 对象
主键集合: IDBKeyRange 对象
打开数据库
var request = Windows.indexedDB.open(databaseName, version); // 如果不存在则创建
open 请求不会立即打开数据库或者开始一个事务, 而是返回一个 IDBRequest 对象, 这个对象通过 error,success,upgradeneeded 三个事件处理打开数据库的操作结果.
- request.onerror = function (event) {
- console.log('数据库打开报错');
- };
- var db;
- request.onsuccess = function (event) {
- db = request.result;
- console.log('数据库打开成功');
- };
- // 如果指定的版本号, 大于数据库的实际版本号, 就会发生数据库升级事件 upgradeneeded
- request.onupgradeneeded = function (event) {
- db = event.target.result;
- }
通过事件对象的 target.result 属性, 拿到数据库实例
三, Web SQL Datebase
HTML5 IndexedDB 和 Web SQL Database 都是本地数据库数据存储, Web SQL Database 数据库要出来的更早, 然并卵. 从 2010 年 11 月 18 日 W3C 宣布舍弃 Web SQL database 草案开始, 就已经注定 Web SQL Database 数据库是明日黄花. 因此在此只做一些了解.
Web SQL Database 允许引用程序通过一个异步 JavaScript 接口访问 SQLlite 数据库. 浏览器兼容性: 主流浏览器除 IE,Edge,Firefox
HTML5 对 Web SQL 的操作包含以下 3 个核心方法:
openDatebase: 用来创建或打开数据库
transaction: 允许我们执行事务处理
executeSql: 用于执行 SQL 语句
1. 创建 / 打开数据库
var db = openDatabase(name,version,text,size,callback)
参数: 数据库名称, 版本号, 描述文本, 数据库大小(字节), 创建回调(非必须)
2. 执行事务
- db.transaction(function (tx) {
- // ... tx 为 transaction 对象的引用.
- });
3. 写 SQL 语句
executeSql(sql,[],datahandler,errorhandler)
参数: 要执行的 sql 语句, sql 语句中占位符 "?" 对应的参数值, 执行成功时调用的回调, 失败时调用的回调
示例:
- $(function(){
- var db = openDatabase("data.db","1.0","demo data",1024*1024);
- if(!db)
- {
- alert("该浏览器不支持 Web SQL");
- }
- db.transaction(function (tx) {
- // 创建表
- tx.executeSql("create table if not exists Demo(uName text null,title text null ,words text null)",
- [],function (tx,result) { /*result 返回的结果 */ },function (tx,message) { /*message 是错误信息的描述 */ });
- // 写入数据
- tx.executeSql("insert into Demo(uName,title,words)values(?,?,?)",["姓名","标题","内容"],
- function (tx,data) { alert(data) }, function (tx, error) { alert(error) });
- // 读取数据
- tx.executeSql("select * from deom",[],function (tx, data) { alert(data) },
- function (tx, error) { alert(error) });
- });
- });
四, Application Cache(应用缓存)
HTML5 引入了应用程序缓存技术, 意味着 Web 应用可进行缓存, 并在没有网络的情况下使用, 通过创建 cache manifest 文件, 可以轻松的创建离线应用.
Application Cache 带来的三个优势是:1 离线浏览 2 提升页面载入速度 3 降低服务器压力; 缺点是:1更新版本后, 必须刷新一次才会启动新版本 2 进入离线存储的页面, 如果不更新版本, 是会将其当成静态页面不请求 3 无法进行灰度发布等策略.
Application Cache 和 WebStorage 在使用上的区别是, 后者存储非关键性数据, 做锦上添花的事情, 前者用于存储静态资源.
使用方法:
1. 配置 manifest 文件
<HTML manifest="demo.appcache"> ... </HTML>
2.manifest 文件
manifest 文件是简单的文本文件, 它告知浏览器被缓存的内容(以及不缓存的内容).
manifest 文件可分为三个部分:
1 CACHE MANIFEST - 列出需要缓存的文件(必需)
2 NETWORK - 列出不需要被缓存的文件(非必需)
3 FALLBACK- 列出规定当页面无法访问时的回退页面(文件, 比如 404 页面, 非必需)
CACHE MANIFEST # 缓存文件爱你
/theme.CSS
/main.JS
NETWORK: # 不需要缓存的文件
login.jsp
- FALLBACK:
- /HTML/ /offline.HTML
3. 服务器端
manifest 文件需要配置正确的 MIME-type, 即 "text/cache-manifest", 必须在 Web 服务器上进行配置.
4. 常用 API
核心是 applicationCache 对象, 有个 status 属性, 表示应用缓存的当前状态:
(UNCACHED): 无缓存, 即没有与页面相关的应用缓存
(IDLE): 闲置, 即应用缓存未得到更新
(CHECKING): 检查中, 即正在下载描述文件并检查更新
(DOWNLOADING): 下载中, 即应用缓存正在下载描述文件中指定的资源
(UPDATEREADY): 更新完成, 所有资源都已下载完毕
(IDLE): 废弃, 即应用缓存的描述文件已经不存在了, 因此页面无法再访问应用缓存
5.JS 事件(表示应用缓存的状态的改变)
checking : 在浏览器为应用缓存查找更新时触发
error : 在检查更新或下载资源期间发送错误时触发
noupdate : 在检查描述文件发现文件无变化时触发
downloading : 在开始下载应用缓存资源时触发
progress: 在文件下载应用缓存的过程中持续不断地下载地触发
updateready : 在页面新的应用缓存下载完毕触发
cached : 在应用缓存完整可用时触发
6. 更新缓存
1. 更新 manifest 文件 2. 清除浏览器缓存 3. 通过 JavaScript 操作
- applicationCache.addEventListener('updateready', function(e) {
- if (applicationCache.status == applicationCache.UPDATEREADY) {
- applicationCache.swapCache(); // 使用新版本资源
- Windows.location.reload(); // 刷新页面
- }
- }, false);
6. 注意事项
1. 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)
2. 如果 manifest 文件, 或者内部列举的某一个文件不能正常下载, 整个更新过程将视为失败, 浏览器继续全部使用老的缓存
3. 引用 manifest 的 HTML 必须与 manifest 文件同源, 在同一个域下
4. 浏览器会自动缓存引用 manifest 文件的 HTML 文件, 这就导致如果改了 HTML 内容, 也需要更新版本才能做到更新.
5. manifest 文件中 CACHE 则与 NETWORK,FALLBACK 的位置顺序没有关系, 如果是隐式声明需要在最前面
6. FALLBACK 中的资源必须和 manifest 文件同源
7. 更新完版本后, 必须刷新一次才会启动新版本(会出现重刷一次页面的情况), 需要添加监听版本事件.
8. 站点中的其他页面即使没有设置 manifest 属性, 请求的资源如果在缓存中也从缓存中访问
9. 当 manifest 文件发生改变时, 资源请求本身也会触发更新
7. 离线缓存与传统浏览器缓存的区别
1. 离线缓存是针对整个应用, 浏览器缓存是单个文件
2. 离线缓存断网了还是可以打开页面, 浏览器缓存不行
3. 离线缓存可以主动通知浏览器更新资源
参考资料:
- http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
- https://www.cnblogs.com/LuckyWinty/p/5699117.html
- https://www.cnblogs.com/yexiaochai/p/4271834.html
来源: https://www.cnblogs.com/V587Chinese/p/10178833.html