cookie的用法
设置cookie
function setCookie(name,value,hours,path,domain,secure){
var cdata = name + "=" + value;
if(hours){
var d = new Date();
d.setHours(d.getHours() + hours);
cdata += "; expires=" + d.toGMTString();
}
cdata +=path ? ("; path=" + path) : "" ;
cdata +=domain ? ("; domain=" + domain) : "" ;
cdata +=secure ? ("; secure=" + secure) : "" ;
document.cookie = cdata;
}
读取cookie
function getCookie(name){
var reg = eval("/(?:^|;\\s*)" + name + "=([^=]+)(?:;|$)/");
return reg.test(document.cookie) ? RegExp.$1 : "";
}
删除cookie
function removeCookie(name,path,domain){
this.setCookie(name,"",-1,path,domain);
}
参数注释
名称(name):一个唯一确定cookie的名称,部分大小写,cookie的名字必须是经过URL编码的,一般可以采用某个前缀在加上当前时间的做法,这样的话名称能够确保是唯一的,也比较方便。
值(value):存储在cookie中的字符串值,必须经过被URL编码
失效时间(hours):小时为单位
路径(path):指定域中的那个路径,应该想服务器发送cookie,/ 表示没有限制
安全标志(secure):指定以后,cookie只有在使用SSL连接的时候才可以发送到服务器。设定cookie为安全的(secure=true),只能在HTTPS或与其他安全协议,连接在一起的时候才被传输。
域(domain):对于哪个域是有效的,如果没有设置的话,默认来自设置cookie的那个域,在上诉例子中就是.Mozilla.org
例子
setCookie(“phone”,”444”,24,”/”,”.”,false);
删除名称为”phone”的cookie
removeCookie (“phone”)
如果设置时设定了path参数,删除名称为”phone”的cookie时,也需要传入对应path参数
removeCookie(“phone”,”/”)
<html>
<head>
<script language="javascript">
function Window_Load(){
setCookie("name","111"); //临时cookie
setCookie("age","222",24 * 7); //保存7天
setCookie("address","333",24,"/"); //保存1天,path为根目录
//设定cookie为安全的(secure=true),只能在HTTPS或与其他<a href="https://www.baidu.com/s?wd=%E5%AE%89%E5%85%A8%E5%8D%8F%E8%AE%AE&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLmWTznymLrjN9njm3rjP-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHmLrj6vrHcs" target="_blank" class="baidu-highlight">安全协议</a>
//连接在一起的时候才被传输
setCookie("phone","444",24,"/",".",false);
alert(document.cookie);
alert(getCookie("age"));
//删除名称为"age"的cookie
removeCookie("age")
alert(document.cookie);
//删除名称为"address"的cookie,因为设置时设定的path,所以删除
//时也需要传入对应path
removeCookie("address","/")
alert(document.cookie);
}
function setCookie(name,value,hours,path,domain,secure){
var cdata = name + "=" + value;
if(hours){
var d = new Date();
d.setHours(d.getHours() + hours);
cdata += "; expires=" + d.toGMTString();
}
cdata +=path ? ("; path=" + path) : "" ;
cdata +=domain ? ("; domain=" + domain) : "" ;
cdata +=secure ? ("; secure=" + secure) : "" ;
document.cookie = cdata;
}
function getCookie(name){
var reg = eval("/(?:^|;\\s*)" + name + "=([^=]+)(?:;|$)/");
return reg.test(document.cookie) ? RegExp.$1 : "";
}
function removeCookie(name,path,domain){
this.setCookie(name,"",-1,path,domain);
}
</script>
</head>
<body onload="Window_Load();">
</body>
</html>
cookie优点
1.通过良好的编程,控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术(SSL),减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据,即使被盗也不会有重大损失。
4.控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。、
5.不需要服务器资源,直接存储在本地。
cookie缺点
每个域的cookie总数是有限的,不同浏览器之间各有不同。
- IE6以及更低版本限制每个域名最多20个cookie
- IE7之后的版本每个域名最多50个。
- Firefox限制每个与最多50个cookie
- Safari和Chrome对于每个域的cookie数量限制没有硬性规定。
cookie的清理
IE和Opera会删除最近最少使用过的cookie,但是Firefox是随机决定要清除哪个cookie。cookie大小的限制
大多数浏览器4096B的长度限制,为了兼容多种浏览器,最好将长度限制在4095B以内.
每个domain最多只能有20条cookie。安全性
Cookie文件中可能含有涉密信息,可能会导致信息泄露。
Cookie可以被改写,欺骗服务程序或者搜集资料从事非法活动。
区别
- 数据大小不能超过4KB。
- 不管是否有需求,cookie数据都会在HTTP请求中携带,在浏览器和服务器中来回传递,占用资源。
- 可以在后端设置修改,数据仅在本地浏览器保存。
- cookie数据可以设置路径,限制cookie只属于某个路径下。
- 默认数据失效是关闭浏览器,也可以设置失效时间
SessionStorage的用法
获取sessionStorage
sessionStorage.getItem(keyName); //获取指定key的本地存储的值
//或者
var keyName=sessionStorage.key;
添加sessionStorage:
sessionStorage.setItem(keyName,value); // 将value存储到key字段中
//或者
sessionStorage.keyName='value';
删除sessionStorage
sessionStorage.removeItem(keyName); // 删除指定ke的本地存储的值
区别
- 数据大小5M或者更大。
- 不会和跟随HTTP请求,所以不会占用资源。
- 数据存储在浏览器仅在浏览器为关闭的状态,关闭窗口后数据就会销毁。可以讲是“临时存储”
- sessionStorage在不同浏览器窗口下不会共享数据,即使打开同一个页面。
localStorage的用法
获取localStorage:
localStorage.getItem(keyName); //获取指定key的本地存储的值
//或者
var keyName=localStorage.key;
添加localStorage:
localStorage.setItem(keyName,value); // 将value存储到key字段中
//或者
localStorage.keyName='value';
删除localStorage:
localStorage.removeItem(keyName); // 删除指定ke的本地存储的值
区别
- 数据大小5M或者更大。
- 不会和跟随HTTP请求,所以不会占用资源。
- 数据保存在本地硬件设备(通常指硬盘,也可以是其他),需要用户主动删除,否则就是永久保存 。不同浏览器之间不会共享数据。
参考资料
[1]: < https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie#Summary >
[2]: 《JavaScript高级程序设计》Nicholas C.Zakas著 李松峰 曹力译
[3]: < https://zhidao.baidu.com/question/567886920.html >
[4]: < https://segmentfault.com/a/1190000010098593 >
[5]: < http://blog.csdn.net/thronest/article/details/76850550 >
[6]: cookie详解