1.离线检测:H5定义了navigator.online属性,为true 表示设备能上网
还定义了两个相关事件:online和offline
2 数据存储
- cookie——HTTP coolie,客户端存储会话信息的。该标准要求服务器对任意的HTTP请求发送Set-Cookie HTTP头作为响应的一部分‘
/*
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value;expire=expiration_time;path=domain_path;secure
Other-header: other-header-value
这个HTTP响应设置以name为名称,以value为值的一个cookie,名称和值在传送时都必须时URL编码
*/
2. cookie组成:
1. 名称
2. 值
3. 域
4. 路径
5. 失效时间
6. 安全标志:cookie只有在使用SSL连接时才发送到服务器
所有的值和名字都经过URL编码,必须使用decodeURIComponent()解析
基本的cookie操作:读取,写入和删除
子cookie:为了绕开浏览器的单域名下cookie的限制,使用了子cookie(subcookie)
格式:
name=name1=value1&name2=value2&name3=value3
/* 设置子cookie */
var subcookieUtil = {
get: function (name, subName) {
var subcookies = this.getAll(name);
if (subcookies) {
return subcookies[subName];
} else {
return null;
}
},
getAll: function (name) {
var cookieName = encodeURIComponent(name) "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue,
cookieEnd,
subcookies,
i, len,
parts,
result = {};
if (cookieStart) {
cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = docuemnt.cookie.substring(cookieStart cookieName.length, cookieEnd);
if (cookieValue.length > 0) {
subcookies = cookieValue.split("&");
for (i = 0, len = subcookies.length; i < len; i ) {
parts = subcookies[i].split("=");
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
return result;
}
}
return null;
},
set: function (name, subName, value, expires, path, domain, secure) {
var subcookies = this.getAll(name) || {};
suvcookies[subName] = value;
this.setAll(name, subcookies, exprires, path, domain, secure);
},
setAll: function (name, subcookies, exprires, path, domain, secure) {
var cookieText = encodeURIComponent(name) "=",
subcookieParts = new Array(),
subName;
for (subName in subcookies) {
if (subcookies.hasOwnProperty(subName) && subName.length > 0) {
subcookieParts.push(encodeURIComponent(subName) "=" encodeURIComponent(subcookies[subName]));
}
}
if (subcookieParts.length > 0) {
cookieText = subcookieParts.join("&");
if (expires instanceof Date) {
cookieText = ";expires=" expires.toGMTString();
}
if (path) {
cookieText = ";path=" path;
}
if (doamin) {
cookieText = ";domain=" domain;
}
if (secure) {
cookieText = ';secure';
}
}
document.cookie = cookieText;
},
//删除一个子cookie 而不影响其他
unset: function (name, subName, path, domain, secure) {
var subcookies = this.getAll(name);
if (subcookies) {
delete subcookies(subName);
this.setAll(name, subcookies, null, path, domain, secure);
}
},
// 删除整个cookie
unsetAll: function (name, path, domian, secure) {
this.setAll(name, null, new Date(), path, domain, secure);
}
}
由于所有的cookie都会由浏览器作为请求头发送,不能存储大量信息,不能存储重要 敏感的数据(他人可以访问到)
3. Web存储机制
web storage——两个目标:
1. 提供一种cookie以外的存储途径
2. 提供一种存储大量可以跨会话存在的数据的机制
Storage对象有方法: getItem(name) setItem(name,value)
web storage规范了两个window的属性:
1. sessionStorage:该数据至保持到浏览器关闭,它可以跨越页面刷新而存在——适用于仅针对会话的小段数据的存储()
2. globalStorage:跨越会话存储数据,但要指定哪些域可以访问
// 保存只能www.wrox.com域下才能访问的name 类似于Ajax的同源策咯
globalStorage["www.wrox.com"].name="Nichoas";
3. localStorage 取代了globalStorage:不能给localStorage 指定任何访问规则。要访问同一个localStorage ,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上,相当于 globalStorage[location.host] -事先不能确定域名时用
4. storage事件:任何对storage对象进行修改,都会触发storage事件,这个事件的event有以下属性
document.addEventListener("storage",function(event){
alert(event.domain);
},false);
a. domain:域名改变
b. key 删除、设置键名
c. newValue 设置值
d. oldValue
5. 限制:localStorage而言,大多数浏览器是5MB限制,Chrome对每个来源的限制是2.5MB;对于sessionStorage 因浏览器而异 一般是2.5MB
6. IndexedDB——indexed database API 是浏览器中保存结构化数据的一种数据库(使用对象保存数据)http://www.zhangxinxu.com/wordpress/2017/07/html5-indexeddb-js-example/
var request,database,db;
request=indexedDB.open('admin');
request.onerror=function(event){
alert('something bad happened while trying to open' event.target.errorCode);
};
request.onsuccess=function(event){
database=event.target.result; db=database;
};
a. 设计操作是异步的,大多数操作以请求的方式进行有onerror和onsuccess事件处理程序
b. 一开始为indexedDB指定版本号——setVersion()方法
c. 对象存储空间:(需要把对象里面的一个唯一属性作为键) //创建一个键为username的名字是users的存储空间 add()/ push()添加 /更新数据
var store=db.createObjectStore("users",{keyPath:"username"});
d. 查询数据:var transaction=db.transaction();
e. 游标查询:游标是指向结果集的指针。在存储空间上调用openCursor()
1. 键的范围4中方法:only() lowerBound() upBound() bound()
2. 设定游标的方向(可选的第二个参数)
f. 索引:一个对象存储空间指定多个键,将ID作为主键。创建主键:
var store=db.transaction("users").objectStore("users");
var index=store.createIndex("username","username",{unique:false});//设置索引值
var index=store.index("username");//获取索引值
g. 并发问题:indexedDB虽然是异步的 但还是有并发操作问题,(浏览器两个不同的标签页打开了同一个页面)就要指定版本号setVersion(),指定onversionchange事件处理程序,立即关闭
// 并发处理
var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
var request=indexedDB.open("admin");
request.onsuccess=function(event){
var database=event.target.result;
database.onversionchange=function(){
database.close();
};
};
h,限制:indexedDB只能由同源(相同的协议,域和端口)占用磁盘空间有限制,chrome限制5M