JavaScript离线应用与客户端存储
来源:互联网 发布:网络arp攻击怎么办 编辑:程序博客网 时间:2024/05/18 05:10
支持离线引用是HTML5 的一个重点。所谓离线Web应用,就是在设备不能上网的情况下仍然可以运行的应用。
1 离线检测
HTML5定义了一个属性,俩个事件:
- navigator.onLine属性,true表示设备可以上网,false表示设备离线
- online
- offline
if(navigator.onLine){//正常工作}else{//执行离线状态时的任务}EventUtil.addHandler(window,"online",function(){ alert("Online");});EventUtil.addHandler(window,"offline",function(){ alert("Online");});
2 应用缓存
简称appcache,Appcache就是从浏览器的缓存中分出来的一块缓存区,要做缓存区中保存数据,可以使用一个描述文件(manifest file),列车要下载和缓存的资源
CACHE MANIFEST#Commentfile.cssfile.js
将描述文件与页面关联起来,可以在HTML中的manifest属性中指定这个文件的路径,例如:
<html manifest = "/offline.manifest">
这个文件的MiME类型必须是 text/cache-manifest
3 数据存储
2.3.1Cookie
HTTP Cookie ,通常直接叫做cookie,最初是在客户端用于存储会话信息的。服务器响应头如下:
HTTP/1.1 200 OKContent-type:text/htmlSet-Cookie:name=valueOther-header:other-header-value
浏览器为每个请求添加Cookie HTTP头
GET /index.html HTTP/1.1Cookie:name=valueOther-header:other-header-value
限制:每个域的cookie总数是有限的
+ 个数
- IE6:20个
- IE7:50个
- Firefox:50
-Opera:30
- Safari和Chrome没有限制
+ 尺寸:大多浏览器都有大约4096B的长度,为了兼容性最好保持在4095B之内。
2.3.2Web存储机制
目标:
- 提供一种在cookie之外存储会话数据的途径
- 提供一种存储大量可以跨会话存在的数据的机制
1 Storage类型
clear():删除所有值getItem(name):根据指定的名字name获取对应的值key(index):获取index位置处的值的名字removeItem(name):删除name指定的名值对setItem(name,value):为指定name设置一个对应的值
2 sessionStorage对象
sessionStorage对象存储特定于某个会话的数据,也就是该数据只保存到浏览器关闭。这个对象就像会话cookie,也会在浏览器关闭后消失。存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启后依然存在。因为sessionStorage对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到,所以对多页面应用有限制。
3 globalStorage对象
最初的目的是跨越会话存储数据,但是有特定的访问限制。要使用globalStorage,首先要指定哪些域可以访问数据。通过方括号标记使用属性来实现。
globalStorage["wrox.com"].name = "Nicholas";//保存数据var name=globalStorage["wrox.com"].name;//获取数据
在这里,访问的是针对域名为wrox.com的存储空间,这个存储空间对于wrox.com及其所有子域都是可以访问的。
对于globalStorage空间的访问,是依据发起请求的页面的域名、协议和端口来限制的,如果使用HTTPS(端口:8080)协议在wrox.com中存储了数据,那么通过HTTP(端口:80)访问wrox.com的页面是不能访问的。
4 localStorage对象
localStorage在HTML 5 规范中作为持久保存客户端数据的方案取代了globalStorage. 与globalStorage不同,不能给localStorage指定任何访问规则,规则是事先定好的,要访问同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一端口,同一协议。
localStorage和globalStorage都要遵循:数据保留到通过JavaScript删除或者是用户清除浏览器缓存。
限制
localStorage:5MB
sessionStorage的限制因浏览器而异:Chrome、Safari:2.5MB;IE8+和Opera:5MB
2.4 IndexedDB
浏览器中保存结构化数据的一种数据库。其思想是创建一套API,方便保存和读取JavaScript对象,同时还支持查询和搜索。
IndexedDB设计的操作完全是异步进行的
- JavaScript笔记:离线应用与客户端存储
- JavaScript离线应用与客户端存储
- HTML5:离线应用与客户端存储
- JavaScript之离线应用与客户存储
- JavaScript高级程序设计第23章(离线应用与客户端存储)
- JS高级程序设计23-离线应用与客户端存储
- 离线应用与客户端存储(待更)
- 离线缓存与客户端存储总结
- html5离线应用存储
- JS学习21(离线应用与客户端储存)
- HTML5 存储 & 离线web应用
- html5应用缓存(离线存储)
- 离线应用和本地存储
- JavaScript客户端存储
- JavaScript客户端存储
- JavaScript客户端存储
- JavaScript客户端存储
- JavaScript之客户端存储
- Java实现高并发的处理的方式
- jdbc参数量、subList、jsp卡
- The 3n + 1 problem
- Python中reduce与lambda的结合使用
- zoj3609----Modular Inverse (扩展欧几里德)
- JavaScript离线应用与客户端存储
- Unity3D shader(9)——vertex shader(phong光照和BlinnPhong光照)
- git学习
- 决策树分类的一个入门示例
- TensorFlow:Object_Detection_API在Windows10上的配置
- Mac系统隐藏和显示文件
- 用最简单快捷的方法用js写一个计算器
- HashMap的实现原理
- brctl网桥配置命令、网卡的链路聚合