肉渣教程

JS Cookies

上一节 下一节

什么是Cookie?

Cookie是以小文件的形式存储在客户端的数据。

每次客户端浏览器想服务器发起请求时,就会带上cookie;通过cookie,服务器就可以分辨这是哪个用户;否则当一次请求结束后,下次服务器就不认识这个用户了。

具体如何识别这个用户,同时防止cookie被伪造,这就是具体问题具体设计啦。如若说简单一些,比如用户A输入用户名和登录密码后,登录成功,则服务器给用户A的cookie中存储一个标识号,之后用户A再请求时,服务器就通过cookie中的那个标识号而知道这是用户A。(这是一个简单的例子,实际操作中会比这更复杂)


一般来说,cookie都会以键值配对的方式来存储数据。


使用JavaScript 创建Cookie

通过document.cookie属性可以创建、读取、删除cookie


案例1:创建1个cookie。

document.cookie = "username=Jerk";


案例2:在cookie中添加过期时间,否则默认情况下,当浏览器关闭,cookie就会被删除。

document.cookie = "username=Jerk; expires=Sun, 18 Dec 2072 12:00:00 UTC";


案例3:在添加一个参数path(代表cookie是属于哪个页面路径的)

document.cookie = "username=Jerk; expires=Sun, 18 Dec 2072 12:00:00 UTC; path=/";

使用JavaScript 读取Cookie

直接读取document.cookie这个属性值即可;不过,返回的方式是以一个字符串返回所有的cookie,大致的形式是cookie1=value; cookie2=value; cookie3=value;这种感觉。

var x = document.cookie;

使用JavaScript 改变Cookie

就像使用JavaScript创建Cookie那样即可,直接把新的Cookie值赋值过去即可,旧的Cookie机会被覆盖。

document.cookie = "username=Zhuanfou; expires=Sun, 18 Dec 2072 12:00:00 UTC";

使用JavaScript 删除Cookie

想要删除Cookie,既可以删除具体的某个字段,也可以直接把Cookie的过期时间设置成一个已经过期的时间即可。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

上述这些方式都是通过JavaScript直接操作Cookie字符串,下面会介绍直接针对Cookie字段的操作方法。


自定义函数读取Cookie

不用理解函数内部,要用这个函数时拿去用就好啦。

function getCookie(name) {
    var c = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return c ? c[1] : undefined;
}

使用JavaScript第三方库来操作Cookie

如果只是要使用JavaScript来读取Cookie,用上面那个函数就足够了。

但是,如果要大量使用JavaScript来创建、修改、删除、读取Cookie,推荐使用第三方现成的JS库,别自己去裸写;推荐如下几个专门用来操作Cookie的JS开源库:


JS Cookies

上一节 下一节