HTML5 存储 & 离线web应用

最新推荐文章于 2017-08-21 21:43:06 发布

选择离开就别回头

最新推荐文章于 2017-08-21 21:43:06 发布

阅读量297

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/zxcasd753651/article/details/52931572

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

cookie存储：每次HTTP请求都会发送cookie信息，会使Web变慢

每次HTTP请求的cookie信息不加密传输，不安全

cookie信息量最大不能超过4kb

检测浏览器是否支持该特性

function supports_html5_storage(){
	return ('localStorage' in window) && window['localStorage'] !=null;
}

HTML5存储是基于键值对的方法：setItem(), removeItem(), clear()

操作数据库

openDatebase('documents', '1.0', 'Local document storage', 5*1024*1024, function(db){

db.changeVersion(' ', '1.0', function(t){

t.executeSql('SQL语句');

}, error);

});

---------------------------------------------------------------------------------------------------------------------------------------------------

离线web应用核心：缓存清单文件要下载并缓存这些资源，只需将<html>元素上的manifest属性指向清单文件

缓存清单文件可以放在web服务器的任意位置，但必须要求服务器支持text/cache-manifest内容类型。对于基于Apache的web服务器，需要在web应用根目录下的.htaccess文件中增加 AddType text/cache-manifest .manifest 缓存清单文件的文件后缀为manifest。

每个页面都需要设置manifest属性。

NETWORK（线上白名单段）：属于该段的声明，永远不会被缓存；

CACHE（显示段）

FALLBACK（默认段）：为那些由于某些原因无法被缓存或者缓存失败的资源制定替代资源。

事件流：当浏览器访问一个指向缓存清单文件的页面时，window.applicationCache对象上的一系列事件会被浏览器触发。

checking事件→浏览器从未访问过的缓存清单：downloading事件 process事件 cached事件

之前浏览器访问过该页面或访问过指向同一个缓存清单文件的其他页面：→缓存清单未发生变动Lnoupdate事件

发生变动 downloading事件

→updateready事件

调试：在过期时间内更改manifest，重新刷新页面，显示页面没有过期。在web应用根目录下的.htaccess文件中增加

ExpiresActive On

ExpiresDefault "access" 但是这样配置就意味着.htaccess文件所在的目录以及子目录都不会以HTTP头信息的方式来实现缓存，因此需要制定<Files>标识，使其只作用于缓存清单文件或者创建一个单独的目录，枝江.htaccess文件和缓存清单文件放置在该子目录下。

选择离开就别回头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 存储 & 离线web应用

cookie存储：每次HTTP请求都会发送cookie信息，会使Web变慢每次HTTP请求的cookie信息不加密传输，不安全cookie信息量最大不能超过4kb检测浏览器是否支持该特性function supports_html5_storage(){ return ('localStorage' in window) && window['localStorage
复制链接

扫一扫