首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript操作cookie

一 cookie简介

cookie的应用非常的广泛,使用它可以保存浏览信息,比如用户名和密码等。

当浏览器者访问某些web站点时,这些站点会在浏览者的本地硬盘上创建一个很小的文本文件用以存储一些信息,这个文件我们就称之为cookie文件。可以使用JavaScript操作cookie,当然也可以使用其他语言。

cookie的基本知识:

每一个cookie都是名值对的组合,格式都是:=,例如:

userId=12

如果有多个名值对,则可以使用分号(;)将他们分隔,例如:

userId=12;userName=zhang

使用document.cookie属性设置或者获取与当前文档相关的所有cookie ,例如:

document.cookie="userName=zhang";

document.cookie="pw=123";

以上代码将两个名值对追加到cookie字符串中。

这两个cookie不可以只是用一个语句设置,代码如下:

document.cookie="userName=zhang;pw=123"

以上代码无法同时设置两个名值对,只有第一对生效。

使用document.cookie可以获取同一域名下所有的cookie:

document.cookie

特别说明:

(1).JavaScript中,cookie是document对象的一个属性,在使用document.cookie设置cookie是一种追加机制,后设置cookie不会覆盖前面设置的cookie。

(2).cookie名值中不能够使用分号、逗号、和等号和空格等字符,不过可以使用escape()函数进行编码就可以避免乱码和特殊字符问题,在取出值之后再使用unescape()函数进行解码才能够得到原有的cookie值。

二 读写cookie

一.写入cookie:

设置cookie的格式如下:

document.cookie="name="+username;

封装代码如下:

//两个参数,一个是cookie的名子,一个是值

function SetCookie(name,value){

var Days = 30;//此 cookie 将被保存 30 天

var exp = new Date();//创建一个时间日期对象;

exp.setTime(exp.getTime() + Days*24*60*60*1000);

document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

expires是用来设置对应cookie的过期时间;escape()用来对特殊字符进行编码。

二.读取cookie:

//取cookies函数

function getCookie(name){

if (arr != null) return unescape(arr[2]); return null;

}

上面代码可以读取指定名称的cookie。

三.document.cookie:

document.cookie的表现有一点点奇怪,它可以返回当前页面所有可用的cookie字符串:

console.log(document.cookie);

也可以使用它设置cookie,并且他不会覆盖原有的cookie,只会附加,除非设置的name、value、domain和path都与一个已存在cookie重复,代码如下:

document.cookie = "username=金迅教育;domain=softwhy.com;path=/"

三 删除cookie

在默认情况下,当关闭浏览器结束会话时,cookie就会被删除,这个时候cookie仅仅是驻留在内存中,而没有被写入硬盘。在实际应用中,cookie往往需要保存指定时间以满足需求,例如用户登录信息的记忆等功能。

可以使用expires设置cookie的过期时间。

语法格式:

document.cookie="name=value;expires=date"

date格式是GMT(格林威治时间)格式的日期型字符串。

代码实例如下:

//删除cookie

function delCookie(name){

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = getCookie(name);

if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}

删除指定的cookie非常简单,只要将对应的cookie设置过期即可。

四 cookie路径

当创建一个cookie的时候,这个cookie可能会在多个页面中共享,也就是说并非只有创建cookie的页面可以访问和操作此cookie。在默认情况下,只有和创建cookie的页面在同一个目录或者创建cookie所在目录的子目录下的网页才可以访问cooke,例如:

http://www.softwhy.com/cookies/setCookie.html

在setCookie.html创建cookie,那么cookies/这个路径下所有页面都可以访问此cookie,其他页面无法访问。

当然cookie的有效路径是可以进行设置的,语法格式如下:

document.cookie = "name=value;path=path"

例如,我们将path设置为根目录,那么整个站点的页面都可以访问此cookie,代码如下:

document.cookie="userName=zhang;path=/"

五 cookie域

语法格式:

document.cookie="name=value;path=path;domain=domain"

代码如下:

document.cookie="username=Darren;path=/;domain=softwhy.com"

特别说明:

(1).path的值要设置为"/"。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180214G073LK00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券