js读写cookie方式以及中文乱码问题

读写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
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值