HTML5的MSE,HTML5 本地存储 - osc_msepeizi的个人空间 - OSCHINA - 中文开源技术交流社区...

早期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 = window.sessionStorage;

for(var i=0;i

{

console.log("{0}：{1}\n".format(se.key(i),se.getItem(se.key(i))));

}

事件

当存储区域(localstorage、sessionstorage)被修改时，将触发storage事件。注意，该事件只会在同源页面触发，不会在发生修改的页面触发。

事件对象 StorageEvent

target 事件目标(DOM 树中的最大目标)

type 事件的类型

bubbles 事件通常是否会出现冒泡

cancelable 事件是否可取消

key 键更改的key

oldValue 正在更改键的旧值

newValue 正在更改键的新值

url 键更改的文档的地址

storageArea 受影响的存储对象

示例：

window.addEventListener("storage", (e) => {});

二、IndexedDB

与WebStorage使用简单字符串键值对不同，IndexedDB是为了能够在客户端储存大量的结构化数据，并使用索引高效检索的API。前者适合存储少量的数据，对于存储大量结构化的数据，则可使用IndexedDB本地数据库。

浏览器兼容性：所有主流浏览器都已兼容。

基本概念

数据库：IDBDatabase 对象 每个域名(严格的说是协议+域名+端口)都可以新建任意多的数据库。同一个时刻只能有一个版本的数据库存在

对象仓库：IDBObjectStore 对象 每个数据库包含若干个对象仓库，类似于关系型数据库中的表格

数据记录： 对象仓库保存的是数据记录，只有主键和数据体两部分。数据体可以是任意数据类型。

索引： IDBIndex 对象 数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。

事务： IDBTransaction 对象

操作请求：IDBRequest 对象

指针： IDBCursor 对象

主键集合：IDBKeyRange 对象

打开数据库

var request = window.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带来的三个优势是：① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力；缺点是：①更新版本后，必须刷新一次才会启动新版本 ② 进入离线存储的页面，如果不更新版本，是会将其当成静态页面不请求 ③ 无法进行灰度发布等策略。

Application Cache和WebStorage在使用上的区别是，后者存储非关键性数据，做锦上添花的事情，前者用于存储静态资源。

使用方法：

1.配置manifest文件

...

2.manifest文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件可分为三个部分：

① CACHE MANIFEST - 列出需要缓存的文件(必需)

② NETWORK - 列出不需要被缓存的文件(非必需)

③ 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属性，表示应用缓存的当前状态：

0 (UNCACHED): 无缓存， 即没有与页面相关的应用缓存

1 (IDLE): 闲置，即应用缓存未得到更新

2 (CHECKING): 检查中，即正在下载描述文件并检查更新

3 (DOWNLOADING): 下载中，即应用缓存正在下载描述文件中指定的资源

4 (UPDATEREADY): 更新完成，所有资源都已下载完毕

5 (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(); //使用新版本资源

window.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