离线与客户端存储
离线检测
应用缓存 数据存储 cookie web存储机制 indexedDB离线检测1.通过检测navigator.onLine属性2.通过window下的两个事件 online和offlineappcache应用存储---资源缓存在浏览器缓存中,开辟一个缓存区,下载manifest file中配置的文件,后缀又manifest改为推荐用appcache---CACHE MANEFEST#commentxxx.jsxxxx.css---通过关联到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头部加上这段cookiecookie由name域value,域,路径,失效时间,安全标志组成;-有的浏览器中的cookie有个数限制,多了会丢弃(通过设置子cookie的方式来避开限制)-cookie要小于4095B(一般一个字符一字节,但是多字符不一定)-浏览器发送的cookie只有name和value---name:不区分大小写,必须经过url编码方式---value:必须url编码---域domain:对于哪个域是有效的---路径path:对于指定域中的哪个路径需要向服务器发送cookie---失效时间expires:GTM时间,到时间删除cookie---安全标志secure:只有在使用ssl连接时才发送cookieeg:HTTP1.1 200 okcontent-type: text/htmlset-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 storagestorage---sessionstorage,localstorage;方法:clear()---删除所有数据getItem(name)---获得值key(index)---索引获得nameremoveItem(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 路由
locationwindow.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---