JavaScript技巧总结和本地存储(二)
2017-03-10 13:52
323 查看
离线检测
检测是否离线,html5为此定义了一个navigator.onLine属性,这个属性为true表示设备能上网,false表示离线,这个属性还有点兼容问题。因此单独使用这个属性不能确定网络是否连通,即便如此,在请求发生错误的情况,检测这个属性仍然是管用的。
Html5还定义了两个事件:online和offline,当网络从离线变为在线或者从在线变为离线时,分别触发这两个事件。
应用缓存
Hmtl5的应用缓存是专门为开发离线web应用而设计的,Appcache就是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源:
要将描述文件与页面关联起来,可以在<html>中的manifest属性中指定这个文件路径。
虽然应用缓存的意图是确保离线时资源可用,但也有相应的JavaScript API 让你知道它在做什么。这个API的核心是applicationCache对象,这个对象有一个status属性,属性的值是常量,表示应用缓存的如下当前状态。
0:无缓存
1:闲置
2:检查中
3:下载中
4:更新完成
5:废弃
应用缓存还有很多相关的事件,表示其状态的改变
checking:在浏览器为应用缓存查找更新时触发
error:在检查更新或下载资源期间发生错误时触发
noupdate:在检查描述文体发现文件无变化时触发
downloading:在开始下载应用缓存资源时触发
progress:在文件下载应用缓存的过程中持续不断地触发
updateready:在页面新的应用缓存下载完毕可以通过swapcache使用时触发
cached:在应用缓存完整可用时触发
数据存储
HTTP Cookie是在客户端用于存储会话信息的,该标准要求服务器对任意http请求发送Set-Cookie HTTP头作为响应的一部分,其中包括会话信息。
限制:cookie在性质上是绑定的域名下的,当设定了一个cookie后,再给创建它的域名发生请求时,都会包含中国cookie,这个限制确保了存储在cookie中的信息只能让批准的接受者访问,而无法被其他域访问。
Cookie的构造
Cookie由浏览器保存的以下几块信息构成:
名称:一个唯一确定cookie的名称。
值:存储在cookie中的字符串,
域:cookie对于哪个域是有效的
路径:对于指定域中的那个路径,应该向服务器发送cookie
失效时间:表示cookie何时应该被删除。
安全标志:指定后,cookie只有在使用SSL连接的时候才发生到服务器。
JavaScript中的cookie
Cookie所有名字和值都是经过URL编码的,所以必须使用decodeURIComponent来解码。
由于JavaScript中读写cookie不是非常直观,常常需要写一些函数来简化cookie的功能,基本的cookie操作有三种:读取、写入和删除:
子cookie
为了绕开浏览器的单域名下的cookie数限制,一些开发人员使用了一种称为子cookie的概念。子cookie是存放在单个cookie中的更小段的数据。也就是使用cookie值来存储多个名称值对儿。
Web存储机制
也就是html5新加的sessionStorage 和localStorage
检测是否离线,html5为此定义了一个navigator.onLine属性,这个属性为true表示设备能上网,false表示离线,这个属性还有点兼容问题。因此单独使用这个属性不能确定网络是否连通,即便如此,在请求发生错误的情况,检测这个属性仍然是管用的。
Html5还定义了两个事件:online和offline,当网络从离线变为在线或者从在线变为离线时,分别触发这两个事件。
应用缓存
Hmtl5的应用缓存是专门为开发离线web应用而设计的,Appcache就是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源:
CACHE MANIFEST #Comment file.js file.css
要将描述文件与页面关联起来,可以在<html>中的manifest属性中指定这个文件路径。
虽然应用缓存的意图是确保离线时资源可用,但也有相应的JavaScript API 让你知道它在做什么。这个API的核心是applicationCache对象,这个对象有一个status属性,属性的值是常量,表示应用缓存的如下当前状态。
0:无缓存
1:闲置
2:检查中
3:下载中
4:更新完成
5:废弃
应用缓存还有很多相关的事件,表示其状态的改变
checking:在浏览器为应用缓存查找更新时触发
error:在检查更新或下载资源期间发生错误时触发
noupdate:在检查描述文体发现文件无变化时触发
downloading:在开始下载应用缓存资源时触发
progress:在文件下载应用缓存的过程中持续不断地触发
updateready:在页面新的应用缓存下载完毕可以通过swapcache使用时触发
cached:在应用缓存完整可用时触发
数据存储
HTTP Cookie是在客户端用于存储会话信息的,该标准要求服务器对任意http请求发送Set-Cookie HTTP头作为响应的一部分,其中包括会话信息。
限制:cookie在性质上是绑定的域名下的,当设定了一个cookie后,再给创建它的域名发生请求时,都会包含中国cookie,这个限制确保了存储在cookie中的信息只能让批准的接受者访问,而无法被其他域访问。
Cookie的构造
Cookie由浏览器保存的以下几块信息构成:
名称:一个唯一确定cookie的名称。
值:存储在cookie中的字符串,
域:cookie对于哪个域是有效的
路径:对于指定域中的那个路径,应该向服务器发送cookie
失效时间:表示cookie何时应该被删除。
安全标志:指定后,cookie只有在使用SSL连接的时候才发生到服务器。
JavaScript中的cookie
Cookie所有名字和值都是经过URL编码的,所以必须使用decodeURIComponent来解码。
由于JavaScript中读写cookie不是非常直观,常常需要写一些函数来简化cookie的功能,基本的cookie操作有三种:读取、写入和删除:
var CookieUtil={ get:function(name){ var cookieName=encodeURIComponent(name)+”=”, cookieStart=document.cookie.indexOf(cookieName), cookieValue=null; if(cookieStart>-1){ var cookieEnd=document.cookie.indexOf(“;”,cookieStart); if(cookieEnd==-1){ cookieEnd=document.cookie.length; } cookieValue=decodeURIComponent(doucument.cookie.substring(cookieStart+cookieName.length,cookieEnd)); } Retrun cookieValue; }, set:function(name,value,expires,path,domain,secure){ var cookieText=encodeURIComponent(name)+”=”+encodeURIComponent(value); if(expires instanceof Date){ cookieText+=”; expires=”+expires.toGMTString(); } if(path){ cookieText+=”; path=”+path; } if(domain){ cookieText+=”; domain=”+domain; } if(secure){ cookieText+=”; secure”; } Document.cookie=cookieText; }, unset:function(name,path,domain,secure){ this.set(name,””,new Date(0),path,domain,secure); } }
子cookie
为了绕开浏览器的单域名下的cookie数限制,一些开发人员使用了一种称为子cookie的概念。子cookie是存放在单个cookie中的更小段的数据。也就是使用cookie值来存储多个名称值对儿。
Web存储机制
也就是html5新加的sessionStorage 和localStorage
相关文章推荐
- JavaScript技巧总结和本地存储(一)
- JavaScript技巧总结和本地存储(一)
- JavaScript技巧总结和本地存储(一)
- JavaScript本地存储实践(html5的localStorage和ie的userData)的实例页面
- javascript 技巧总结积累109-173条(正在积累中)
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- 温故而知新:javascript 技巧与习惯总结
- javascript创建页面蒙板的一些知识技巧总结第1/3页
- Javascript 的本地存储
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- javascript 技巧总结积累1-108条(正在积累中)
- 突袭HTML5之Javascript API扩展3 - 本地存储
- [收藏]Javascript关于日期的各种技巧和方法总结[欢迎补充]
- Javascript技巧总结
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- javascript 技巧总结积累173-231条(正在积累中)
- javascript创建页面蒙板的一些知识技巧总结第1/3页
- 总结两个Javascript的哈稀对象的一些编程技巧
- JavaScript 技巧总结
- JavaScript本地存储实践(html5的localStorage和ie的userData)