您的位置：首页 > Web前端 > JavaScript

JavaScript离线应用与客户端存储

2017-08-11 23:40 204 查看

支持离线引用是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
#Comment
file.css
file.js

将描述文件与页面关联起来，可以在HTML中的manifest属性中指定这个文件的路径，例如：

<html manifest = "/offline.manifest">

这个文件的MiME类型必须是 text/cache-manifest

3 数据存储

2.3.1Cookie

HTTP Cookie ,通常直接叫做cookie，最初是在客户端用于存储会话信息的。服务器响应头如下：

HTTP/1.1 200 OK
Content-type:text/html
Set-Cookie:name=value
Other-header:other-header-value

浏览器为每个请求添加Cookie HTTP头

GET /index.html HTTP/1.1
Cookie:name=value
Other-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设计的操作完全是异步进行的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航