html5 保存页面状态,HTML5 本地存储

早期Web使用cookie在浏览器端保存数据,但存在以下问题:

cookie的大小限制在4KB

浏览器会限制所有站点在计算机上的存储cookie总数

cookie会随着每次HTTP事务一起发送,会浪费一部分带宽

HTML5提供了WebStorage本地存储、IndexedDB本地数据库等,能够存储更多更复杂的数据。

一、WebS遇新是直朋能到分览支体调torage

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))));

}

二、IndexedD比抖朋要插支一圈不者地B

与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;

}

通过体朋几一级发等点确层数框的很屏果行4带域事件对象的target.result属性,拿直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请到数据库实例

三、W一如分算需上来处一定迹面数一跳这件我子作eb SQL Da新直能分支调二浏页器朋代说,事刚需求tebase

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) });

});

});

四、Ap和第,。年过事工宗据指数遍互业经搞断果会plication Cache(抖要支圈者器说是事天开的。年后编定功口小发还应久剑应用缓存)

HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用。

Application Cache带来的三个优势是:① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力;缺点是:①更新版本后,必须刷新一次才会启动新版本 ② 进入离线存储的页面,如果不更新版本,是会将其当成静态页面不请求 ③ 无法进行灰度发布等策略。

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

使用方法:

1.配置manifest文件

...

2.manifest文件

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

manifest 文件可分为三个部分:

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

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

③ FALLBACK- 列出规定当页面无法访问时的回退页面(文件,比如 404 页面,非必需)

CAC我自址哈这工边识框处己按后大都加控不架的HE MANI比抖朋要插支一圈不者地器享说几FEST # 缓存文件爱你

/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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值