离线存储
做为 html5 的一个特性在现代标准浏览器下已经被广泛实现,特别是 ie8
中也得以实现,但是对于目前仍然流行的ie6,7来说则需要一些额外的兼容性处理。
目前的各种数据存储方式:
1。cookie
cookie 可通过 domain= 设置 domain (必须为当前页面 hostname 的后缀《点分割》),默认为当前页面的 hostname。浏览器提交时通过当前页面的 hostname 和 cookie 的 domain 作比较,如果某个cookie 的 domain 是当前页面 hostname 的后缀则发送给服务器。
refer: HTTP Cookie Explained
优点:
所有浏览器一致兼容
缺点:
不严格的离线存储,每次和服务器交互这些信息都会来回传递,浪费带宽。
每个域只能存储4kb,实际上是送到服务器的大小,多余截断但是仍然可以用脚本访问。
个数限制,根据浏览器不同大概 20-50 个。
数据必须为字符串格式
2.flash sharedObject
将 flash 插件作为数据存取空间
,对于win7,文件实体化于:
c:\Users\用户名\AppData\Roaming\Macromedia\Flash Player\#SharedObjects\随机串\
默认每个域下100KB的存储空间 ( refer:YUI2 SWFStore
),用户也可以这里
设置。
经过用户许可,设置可获得无限的使用空间
updated 2011-04-28:
flash 域
和 cookie 域不同,cookie 域指的是页面所在 domain,而 flash 域则为该 flash 文件所在的页面的 hostname,flash 所在文件服务器可通过 crossdomain.xml
来允许哪些页面 hostname 可以操纵 flash 对象的存储数据,因此可实现cookie 不能的跨域共享数据。需要注意的是同个 hostname 下的多个 flash 实际上是共享默认 100K 的限制,而不是以文件为单元限额。
refer : sharedobject 介绍
优点:
所有浏览器一致兼容,
不会产生网络流量,
不受用户清空浏览器缓存影响,
不同浏览器间也可以共享数据。
通过设置可以不受域访问约束。
数据可以是 javascript 简单格式,例如数组,对象,字符串
理论上经过用户允许可获得无限的存储空间,例如 yui swfstore
当存储空间不足时,会触发 pending 事件,这时我们可以把改 flash 显示在页面中央。用户点击了允许后,则会存储空间扩容(4级 100k -> 1M -> 10M -> unlimited):
store.on("pending", function() {
o.set("width", 215);
o.center();
o.show();
// 轮训,直到用户允许
setTimeout(function() {
store.retrySave();
}, 1000);
});
缺点:
依赖于外部插件(flash)的安装
3.userData
每个应用可以产生上限64kb的单个xml数据文件,单个域可存储上限640k,对于xp,xml实体化于:
C:\Documents and Settings\用户名\UserData
优点:
不需要插件且不和服务器产生网络交互。
缺点:
ie 6,7 浏览器私有特性。
存储数据访问域控制过于严格,只能同样页面访问先前存储的数据。
存在由于内网安全设置导致的访问出错(属性未定义)。
4.localStorage
标准的本地存储解决方案,无限量的存储空间(ie8规定为单个 hostname 上限10MB),同一域内所有页面可互相访问。
以及更复杂完善,支持事务的数据库存储方案
。
updated 2010-11-10
ie8 的 localStorage 只能在 http 协议下使用,在 file 协议下(本地文件中):typeof localStorage 为 undefined
updated 2011-04-28
localStorage 的作用域限定于 html5 origin定义
,即三元组:(scheme, host, port)。同一域名下的所有网页都共享同样的数据,这时就要注意命名冲突了。
优点:
适用当前以及未来的所有的标准浏览器
缺点:
目前流行的浏览器不能支持。
数据需要序列化为字符串,
否则会被自动 toString。这里还需要注意的是:ie (8,9) 性能并不好,大数据量序列化会造成假死现象,推荐还是使用 flash 解决方案:可以存储 plain javascript 格式,不需要序列化。
容量有限,虽然规范没有明确规定,但目前
支持的浏览器都是限额 5M
,而且不像 flash 解决方案一样可以经过程序申请而扩容,超过 5M ,则会抛出 QUOTA_EXCEEDED_ERR error !
兼容:
从上可见,flash具备最多的优点(基本上完全覆盖localStorage),而localStorage 则具备光明的前景,甚至可以采用具备完善事务支持的webdatabase,persistJS
综合考虑提供了完全的解决方案,可方便的在上述4种方法中进行切换,但是过于复杂,可能现实中根本用不到。
目前的最佳实践我认为则是通过 flash 来模拟不支持localstorage浏览器的本地存储:即创建flash为底层的localStorage
,对于连 flash 都不安装的 ie6,7用户就没有考虑的必要了。
Flash in ie note :
当 ie 下flash被缓存时,再次访问,flash 的 ready 事件会在 flash 添加到 dom 的瞬间同步触发,若利用桥接模式使用 javascript 对象封装flash
,则要注意修正,否则
1.ie 缓存状态下事件会在注册之前就触发了。(同步触发)
2.swf 刚 ready,在其事件处理函数中调用 swf其本身 的 External Interface 方法会
flash 内部出错。
比较好的方法则是,手动强制异步flash的事件触发:
FlashBridge.EventHandler = function(id, event) {
var instance = instances[id];
if (instance) {
//防止ie同步触发事件,后面还没on呢,另外给 swf 喘息机会
//否则同步后触发事件,立即调用swf方法会出错
setTimeout(function() {
instance._eventHandler.call(instance, event);
}, 100);
}
};
2010-09-25 update:
发现最新升级 firefox 下的 flash 插件似乎不鼓励单纯使用不可见 flash 做为后台数据支撑,当
1.flash设置为width,height=0
2.或其外围容器的宽高为0
3.或其外围容器定位到了视窗以外
都将导致flash不会触发ready事件,所以只能做到将外围容器设置宽高为1,overflow:hidden,定位到视窗内:
"<div style='width:1px;" +
"height:1px;" +
"position:absolute;" +
//必须使创建的flash视窗内可见,才会触发contentReady
"left:" + DOM.scrollLeft() + "px;" +
"top:" + DOM.scrollTop() + "px;"
+ "overflow:hidden;'><object width='原宽度' ...>....</object></div>"
- 大小: 15.1 KB
分享到:
相关推荐
我通过Application Cache+localStorage+web sql构建了一个离线应用,同时我也把逻辑按照Application cache+localStorage+indexedDB写了一次,有兴趣的同学可以下载,同时代码...可以让大家很快理解HTML5离线存储技术
html5离线存储,本章主要介绍html5离线存储技术,哈哈,希望对大家有帮助
html5离线存储课程代码
html5离线存储实例,两个简单的小实例
数据库数据离线存储
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
solution of offline data storge and upload 离线存储和上传解决方案 blog:http://blog.csdn.net/itas109
最典型的例子是 Gmail,HTML5 的离线存储使用户即使在离线状态下也可以使用 Gmail,另外,Google Docs 也使用离线存储,同样使用离线存储的其它厂商的类似应用还包括 Zoho 的办公套件和 Wordpress 的博客平台。...
LocalForage: 改进的离线存储。 使用简单但强大的API包装IndexedDB,WebSQL或localStorage。
html5离线存储.pdf
《响应式网页开发实战》教学课件04HTML5离线存储.pdf《响应式网页开发实战》教学课件04HTML5离线存储.pdf《响应式网页开发实战》教学课件04HTML5离线存储.pdf《响应式网页开发实战》教学课件04HTML5离线存储.pdf...
通过离线存储,我们可以吧需要离线存储在本地的文件夹列举在manifest配置文件中,这样即使在离线的情况下,用户也可以正常的看见网页在需要离线缓存的页面的htm
离线存储,改进。使用简单但功能强大的API封装IndexedDB、WebSQL或localStorage.zip
用C++做的---离线登录系统, 无需网络,可以自动存储账号信息,采用txt格式存储账号信息, 有注册账号,修改密码,注销账号,退出登录等功能, 注意,运行程序后,不要将其产生的:zh.txt,yhzl.txt,temp.txt删除,...
client-persist:是localForage的分支,支持sessionStorage的Web客户端离线存储。 支持使用API轻松抓取IndexedDB,WebSQL,localStorage和sessionStorage。
EXCE离线生成二维码,可以添加到现有工程里,使用简单,只需要传送 文本,跟存放位置就行。函数名称是 :s2wm
Cloudera Manager安装手册(离线parcels存储库方式),基于CentOS操作系统一步步傻瓜式安装,截图记录整个部署过程。
1、文件放到指定目录下“Iflyime”,如果软件是装在机身存储卡的那就要到机身存储卡里去找这个目录,不是一定要在SD卡里找这个目录。 2、文件放到指定目录后还需一步才可使用哦,点击讯飞输入法程序图标→点击右下...
电信设备-消防维保信息的离线存储方法、移动终端及可读存储介质.zip