用途:在客户端的磁盘上以很小的文件保存一定量的数据。
-
cookie的内容
document.cookie='name=值;[expires=失效时间;
path=路径访问;domain=域名访问;secure=安全的https限制通信]'
上面的代码是设置cookie的格式，cookie是document的属性，可以通过为其赋值的形式设置cookie值。[]内的名值对儿是可选属性。 - 名称
一个唯一确定的cookie名称，必须经过URL编码。 - 值
是名称对应的值，必须被URL编码
document.cookie='user='+encodeURIComponent('杜杜');
同xml一样，需要对中文字符进行编码。 - 失效时间
表示cookie何时应该被删除的时间戳。表示在这个时间范围内，每次访问该网站都会向该网站的服务器发送这个已经保存在本地的cookie值，但是如果这个日期是以前的日期，那么该cookie值就会被删除。
var date=new Date();
date.setDate(date.getDate()+7);
document.cookie='user='+encodeURIComponent('杜杜')+';expires='+date.toGMTString();
//已经写入磁盘啦 -
路径
只有访问在服务器内指定的那个路径下的文件时，才会向该文件发送cookie，否则访问其他路径下的文件，就不会向其发送该cookie。
点开大图，这是hao123网站cookie的信息，发现基本上路径都是与该网页在一个路径下的。当然，如果设置了其他的路径，那么该网页就访问不了他设置的cookie信息。
2015-02-07_205628.jpg
- 域
默认不设置时，该值就是请求所在域，如果domain设置成了该域名的二级子域下，那么不仅其他子域名访问不到该cookie，连一级域名也无法访问。 - 安全标志
document.cookie='user='+encodeURIComponent('杜杜')+';secure';
一旦设置了安全标志，那么cookie只有在使用SSl时，才发送到服务器。 -
封装cookie
var cookieUtil={
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;
},
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(document.cookie.substring(cookieStart+cookieName.length,cookieEnd))
}
return cookieValue;
},
unset:function(name,path,domain,secure){
this.set(name,'',new Date(0),domain,path)
}
}
function setCookieDate(day){
var date=null;
if(typeof day=='number'&&day>0){
date=new Date();
date.setDate(date.getDate()+day);
}else{
throw new Error('!!')
}
return date;
}
cookieUtil.set('name','杜杜',setCookieDate(7));
cookieUtil.set('user','lala',setCookieDate(7));
cookieUtil.set('email','126.com',setCookieDate(7));
这个封装，将设置cookie，读取cookie，消除cookie都封装在一个对象里。
特点：
1、在设置cookie值时，需要判断失效时间expires，不仅要判断他是否为空，而且还要判断他是否是Date类型的实例。
2、取得cookie值时，是根据传递的cookie名称来得出该名称对应的值。
上例子设立了三个名值对，打印cookie信息时，出现的是一个组合的字符串，
2015-02-07_212333.jpg
所以当采用get方式，来获取信息时，需要传递某个名称来查找对应的信息。
alert(cookieUtil.get('name'))//杜杜
3、读取cookie值时，需要熟练的使用字符串的方法。 - cookie限制
- 每个域的cookie总数是有限的，IE6以及更低版本限制每个域名最多20个，然后其他浏览器都相对多一点，但是为了兼容性考虑，也就得限制在20多个啦。
- 每个cookie的长度限制在4095B以内。
- 由于cookie是存在客户端计算机上的，所以安全性不太高。
-
IE5中的用户数据
考虑到这款浏览器的市场份额，所以，我就忽略啦 -
HTML5中web存储机制
首先需要了解一下Storage类型，该类型提供最大的存储空间来存储名值对儿，该类型为所有他的实例定义了如下方法：
clear():删除所有值；但是火狐没有实现。
getItem(name):根据制定的名字name获取对应的值。
key(index):获得index位置处的值的名字。
removeItem(name):删除由name制定的名值对。
setItem(name,value):为制定的name设置一个对应的值。
还可以通过delete操作符进行删除某个名值对。（webkit不支持）
还可以使用length属性来判断有多少名值对。
【然后呢】该类型实例的对象，可以进行存储数据。IE8+，FF3.5+,chrome4+,Opera 10.5+ - sessionStorage该对象是Storage的一个实例，存储特定于某个会话的数据，也就是只保存到浏览器关闭。该对象可以跨越页面刷新而存在，同时，如果浏览器支持，浏览器崩溃后重启依然可用（IE不支持）。
存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问，所以对于多页面应用有限制。
从兼容的角度考虑，只介绍大多数浏览器都支持的方法。- 存储数据
sessionStorage.setItem('name','dudu');//使用方法存储数据,推荐
sessionStorage.name='dudu';//使用属性存储数据 - 读取数据
var name=sessionStorage.getItem('name');
var name=sessionStorage.name; - 删除数据
sessionStorage.removeItem('name'); - 迭代 sessionStorage中的值
第一种方法利用length属性以及key()方法
第二种方法使用for in 循环
【总结】这个方法是适合小段数据存储，且无法跨越会话存储数据。
- 存储数据
- globalStorage该对象不是是Storage的实例，但是当为该对象指定域名使才是Storage的实例。
可以通过location.host来作为域名，比较安全。
例如
globalStorage[location.host]
这样指定域名（子域名访问无效）后，就具备了Storage的实例的全部特征。该对象是用来跨会话存储数据的。如果不使用removeItem()或者delete来删除，或者用户未清除浏览器缓存，存储在该对象属性中的数据会一直保存在磁盘上，所以非常适合客户端存储文档，或者长期保存用户偏好。
但是正是由于该对象需要额外指定域名所以比较麻烦，所以在修订过的html5规范中用localStorage取代了globalStorage。 - localStorage该对象的设置读取以及删除数据的方式与sessionStorage一致。
为了兼容只支持globalStorage的浏览器，可以使用以下函数
function getLoacalStorage(){
if(typeof localStorage=='object'){
return localStorage;
}else if(typeof globalStrage=='object'){
return globalStorage[location.host];
}else{
throw new Error('local storage not available')
}
}
var storage=getLoacalStorage();
当然，任何方法都是有限制的，一般来说对存储空间大小的限制一般都是以每个来源（协议、域。端口）为单位的。每个来源都有固定大小的空间用于保存自己的数据，考虑到这个限制，就要注意分析，和控制每个来源有多少页面需要保存数据。“2.5MB”
网友评论