程序猿先生带你吃透:JavaScript操作cookie

JavaScript/前端
423
0
0
2022-04-27

程序猿先生带你吃透:JavaScript操作cookie

一 cookie简介

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

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

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){

var arr = document.cookie.match(new RegExp("(^| )" + 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域

默认状态下,cookie是不能进行跨域访问的,例如www.softwhy.com和data.softwhy.com是两个域,那么它们两者之间的cookie是不能够互相访问的,不过可以进行人为设置以实现跨域访问。

语法格式:

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

domain就是可以访问cookie的其他域,例如要让www.softwhy.com可以访问data.softwhy.com中的cookie。

代码如下:

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

特别说明:

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

(2).JavaScript的cookie跨域都是限定于同一个主域名下,例如softwhy.com是一个主域名,而www.softwhy.com和data.softwhy.com都是二级域名,并且domain的值一定是主域名,而不能是其他二级域名。

资源:

最近经常有很多程序员朋友问我有没有什么学习资料,尤其是前端还有php的。因为本人是学全栈的,

所以手里是有一些前端还有PHP全套视频学习资料。

程序猿先生带你吃透:JavaScript操作cookie

这些资料绝对比那些在群里漫天飞的资料强多了。相信看完这些,你绝对可以找到一份好工作!为了感谢大家的支持,今天我在这里统一说下吧,关注微信公众号:‘鸡蛋君说前端',就可以免费领取上图价值3万元的全套视频学习资料!

程序员朋友们还在等什么!

前端工程师就在等着你!

php工程师就在等着你!

看完这些资料绝对可以,请叫我雷锋!