读写cookie是前端工程师在做项目时会经常使用的技术。cookie是浏览器提供的机制、是javascript的另一种机制,可以达到真正全局变量的要求。 它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。
设置cookie
每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie(多个cookie之间用半角的’; ‘分隔)
document.cookie="age=28;userName=hulk";
或:(此时为存储多个cookie值)
document.cookie="age=28";
document.cookie="userName=hulk";
注意:cookie 的名或值中不能使用分号(;)、逗号(,)、等号(=)、空格,以及中文(会出现错误或乱码问题)。
如果必须使用上述的特殊字符,则需要用escape()函数进行编码(以16进制数的形式转码)存储:
document.cookie="userName="+escape("珊珊"); //cookie的存储形式为"userName=%u73CA%u73CA"
改变一个cookie的值,只需重新赋值
读取cookie
cookie的值可以由document.cookie
直接获得,获得的是以分号隔开的多个名/值对所组成的字符串,这些名/值对包括了该域名下的所有cookie,如:
var cookies = doucment.cookie;
alert(cookies); //"age=28;userName=%u73CA%u73CA"
如果想读取指定的cookie值,只能自己解析获得到的包含所有cookie的字符串。
例如,要获取age的值,可以这样实现:
var age = document.cookie.split("age=")[1].split(";")[0]; //28
如果想要读取含特殊字符如中文的cookie值,
取出值以后需要使用unescape()进行解码才能得到原来的cookie值
例如,要获取userName的值,可以这样实现:
var name= unescape(document.cookie.split("userName=")[1].split(";")[0]); //珊珊
给cookie设置终止日期
现在的cookie都是单会话cookie,即浏览器关闭后这些cookie将会丢失,事实上这些cookie仅仅是存储在内存中,而没有建立相应的硬盘文件。
如果需要长期保存cookie(例如保存用户登录的状态就需要长期保存),如10天。可以用下面的方式来实现:
<script>
var date = new Date(); //获取当前时间
date.setTime(date.getTime()+10*24*3600*1000); //获取10天后的时间戳
//将age和userName两个cookie设置为10天后过期
document.cookie="age=28;userName=aaa;expires="+date.toGMTString();
</script>
删除cookie
如果要删除一个cookie,可以将其过期时间设定为一个过去的时间。
例如删除age这个cookie:
var date = new Date();
date.setTime(date.getTime()-10000);
document.cookie="age=28;expires="+date.toGMTString();
指定可访问cookie的路径
默认情况下,创建的cookie只可以由它所在目录的 同级目录 或同级目录的 子集目录 访问。
可以使用path参数设置可访问cookie的目录:
document.cookie="age=28; path=/shop"; //表示当前cookie仅能在shop目录下使用。
或
document.cookie="userId=320; path=/"; //表示当前cookie可在整站使用。
可以通过domain参数来实现 跨主机访问:
document.cookie="name=value;domain=.baidu.com"; //这样,所有baidu.com下的主机都可以访问该cookie