HTML5新API
离线与客户端存储
离线检测
应用缓存
数据存储
cookie
web存储机制
indexedDB
离线检测
1.通过检测navigator.onLine属性
2.通过window下的两个事件 online和offline
appcache应用存储---资源缓存
在浏览器缓存中,开辟一个缓存区,下载manifest file中配置的文件,后缀又manifest改为推荐用appcache
---
CACHE MANEFEST
#comment
xxx.js
xxxx.css
---
通过<html manifest="xxx.appcache">关联到html中
API为applicationCache对象
属性---status,应用缓存的状态
无缓存---0;
未更新---1;
检查中,下载描述文件检查更新---2;
下载中,下载描述文件中的指定的资源---3;
更新完成---4;
缓存文件不存在---5;
事件
checking---浏览器检查应用缓存更新
error---检查更新或者下载资源时发生错误
noupdate---检查更新发现无资源无变化
downloading---开始下载资源
progress---下载期间不断被触发
updateready---下载完毕
cached---应用缓存完整
在加载页面期间,会依次触发
方法
update() 检测更新---依次触发事件
swapCache() 在updateready事件触发后,就可以使用swapCache来启用新应用缓存;
cookie
服务器在http头部发送set-cookie给浏览器
浏览器每次访问这个域,就在http头部加上这段cookie
cookie由name域value,域,路径,失效时间,安全标志组成;
-有的浏览器中的cookie有个数限制,多了会丢弃(通过设置子cookie的方式来避开限制)
-cookie要小于4095B(一般一个字符一字节,但是多字符不一定)
-浏览器发送的cookie只有name和value
---name:不区分大小写,必须经过url编码方式
---value:必须url编码
---域domain:对于哪个域是有效的
---路径path:对于指定域中的哪个路径需要向服务器发送cookie
---失效时间expires:GTM时间,到时间删除cookie
---安全标志secure:只有在使用ssl连接时才发送cookie
eg:
HTTP1.1 200 ok
content-type: text/html
set-cookie:name-value;expires=xxxxx GMT;domain=.xxx.com;path=/;secure;
function setcookie (key,value,expires,path,domain,cookie) {
var cookie=encodeURIComponent(key)+"="+encodeURIComponent(value);
if(expires instanceof Date){
cookie+="; expires"+expires;
};
if(path){
cookie+=";expires="+expires;
};
if(domain){
cookie+=";domain="+domain;
};
if(secure){
cookie+=";secure";
};
document.cookie=cookie;
};
web storage
storage---sessionstorage,localstorage;
方法:
clear()---删除所有数据
getItem(name)---获得值
key(index)---索引获得name
removeItem(name)---删除name键值对
setItem(name,value)---设置键值对
事件-storage-支持的少
只要发生改变,就会触发storage事件,事件上的属性包括:
demain:发生变化的存储空间的域名
key:设置或者删除的键名
newvalue:新值,如果是删除值,则是null
oldvalue:修改之前的值
属性:
length
web sockets
XHR---短轮询---浏览器向服务器发送数据,立即响应;
comet:
长轮询---
XHR+服务器监听事件,过一段时间,然后响应
HTTP流---只使用一次http连接--连接后,服务器可以不断传输数据到浏览器
浏览器:XHR+等待(settimeout)+监听readystatechange与readystate===3
通过resposeText接受数据
再添加一个:
request.onreadystatechange=function(){
if(request.readyState===3){
data=request.responseText;---data里是所以接受到的数据;
}
}
服务器端:
$i=0;
while ($i<5) {
echo "number=$i";
ob_flush();
flush();
sleep(1);
$i++;
};
通过xhr和http流,建立双向通话
SSE服务器发送事件-围绕comet的API
将comet封装成Eventsource对象
web Sockets---双向全工通信
不再使用HTTP协议,而是自定义的socket协议(服务器端apache和nginx不支持),
不再有同源的概念
创建对象 var socket=new webSocket("ws://domain:past/path")
属性:
readyState:
CONNECTING: 0
OPEN: 1
CLOSING: 2
CLOSED: 3
方法:
send();---通过send发送数据(字符)
close();
事件:
1.message
socket.onmessage=function(e){
var data=e.data;
}
2.open
3.error
4.close
路由
location
window.location和document.location,都是引用了Location对象
http://localhost:80/demo/backbone/demo.html[?search=x&name=xx]#/blue
属性包括:
hash:锚部分#/blue
host:主机localhost
hostname:主机名localhost
href:完整url
origin:域名:http://localhost
pathname:/demo/backbone/demo.html
port:端口:80
protocol:协议http:
search:参数部分search=x&name=xx
方法:
localtion.assign("url")---跳转到地址
localtion.replace("url")---重定位---删除了历史文档,无法返回
reload()---重新加载当前页(带参数等)
事件:
hashchange---window对象上触发
history
属性:
就只有length,无法访问具体网址(防止个人浏览历史被其他脚本获取);
方法:
back---后退
forward---前进
go---当前为0
pushState---web进入新状态就会调用,将该状态添加到历史记录
(数据,状态标志,状态url)
replaceState---
