Cookie以及JS对Cookie的操作,附源码

布满荆棘的人生 2022-12-01 05:23 155阅读 0赞

Hi,I'm Shendi

因为最近整前后端分离项目,需要使用到cookie,于是就封装了一下,源码放到了最后

--------------------

**目录**

查看浏览器中的Cookie

Cookie有什么用?

JS操作Cookie

添加Cookie

获取Cookie

删除Cookie

源码

--------------------

# Cookie #

首先讲一下Cookie

Cookie是保存在浏览器上的一串数据,每一个网站都有不同的cookie.

Cookie的格式是键值对形式: **键=值;键=值;.....**

## 查看浏览器中的Cookie ##

我使用的Google浏览器

按下F12弹出下面这个窗口,然后点击上方的Application

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70][]

然后选中Coookie下的当前网站,然后在右方就是Cookie的信息了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 1][]

##  ##

## Cookie有什么用? ##

可以用来存一些数据,这些数据都保存在客户端,也就是用户的设备上

例如做前后端分离的项目,后端只提供接口,前端通过ajax获取数据,如此就可以将数据存入Cookie用来判断用户是否登陆,是否...,以及做单点登录

--------------------

# JS操作Cookie #

我们可以通过 document.cookie 来获取到 cookie

可以在控制台测试,在浏览器中按下F12,会有如下窗口用来调试![20200826115509587.png][]

输出document.cookie,返回的是一个"",证明当前页面没有cookie

![20200826115531884.png][]

### 添加Cookie ###

Cookie是一串字符串,我们可以通过直接设置的方式来进行添加

> 这个当时让我纳闷了好一会,解释一下,Cookie是一大串,格式是 键=值;... 我们使用document.cookie获取的是所有的cookie
> 
> 但是cookie可以设置路径(作用于哪个页面),时间(有效时间,单位毫秒),于是乎我们添加的时候是直接设置cookie这一个字符串,但是每个cookie都有对应的路径和时间(独立的)........自行体会

我们通过 document.cookie = "xxx=xxx" 来添加cookie

(document.cookie是获取所有的cookie,但是这样直接赋值是新增一条,而不是替换原有)

在添加的时候,我们可以通过 在字符串后添加path来设置路径,默认为 /,例如

document.cookie = "a=b;path=/index.html;"

这样就添加一个一个key为a,vlaue为b,作用路径为/index.html的cookie

也可以设置此cookie有效时间,通过设置expires,单位是毫秒,默认有效时间是浏览器关闭后就失效,也就是一次会话(session)

var date = new Date();
    date.setTime(date.getTime() + 100000);
    document.cookie = "a=b" + ";expires=" + date.toGMTString();

![20200826120917685.png][]

添加后我们需要刷新页面才可以在控制台看到

![20200826120933216.png][]

Session是有效时间,浏览器关闭后就清除

### 获取Cookie ###

通过 document.cookie 来获取,我们可以通过截取字符串的方式来获取到想要的cookie

![20200826121105479.png][]

### 删除Cookie ###

删除Cookie只要将失效时间设置为已经失效就行了,也就是重新添加一遍 键 与要删除的cookie一致的,时间为当前时间-1就行了

# 源码 #

我封装的cookie操作代码,并且将cookie进行了加密处理

可以从 Github 上获取压缩后的文件

[https://github.com/1711680493/ShendiWeb][https_github.com_1711680493_ShendiWeb]

/**
     * 封装了对 cookie 的操作
     * @author Shendi
     */
    var cookie = {
    		/** 添加Cookie */
    		add : function (key, value, time) {
    			var date = new Date();
    			date.setTime(date.getTime() + time);
    	        document.cookie = escape(btoa(key)) + "=" + escape(btoa(value)) + ";expires=" + date.toGMTString();
    		},
    		/** 获取Cookie */
    		get : function (key) {
    			var c = document.cookie;
    			if (c != "") {
    				var cookies = c.split(";");
    				for (let i = 0; i < cookies.length; i++) {
    					let map = cookies[i].split("=");
    					if (key == atob(unescape(map[0]))) {
    						return atob(unescape(map[1]));
    					}
    				}
    			}
    		},
    		/** 删除指定Cookie */
    		del : function (key) {
    			var c = document.cookie;
    			if (c != "") {
    				var cookies = c.split(";");
    				for (let i = 0; i < cookies.length; i++) {
    					let map = cookies[i].split("=");
    					if (key == atob(unescape(map[0]))) {
    						var date = new Date();
    						date.setTime(date.getTime()-1);
    				        document.cookie = escape(btoa(key)) + "=;expires=" + date.toGMTString();
    					}
    				}
    			}
    		},
    		/** 判断指定 key 是否存在 */
    		exists : function (key) {
    			var c = document.cookie;
    			if (c == "") return false;
    			var cookies = c.split(";");
    			for (let i = 0; i < cookies.length; i++) {
    				if (key == atob(unescape(cookies[i].split("=")[0]))) {
    					return true;
    				}
    			}
    			return false;
    		},
    		/** Cookie是否存在 */
    		cookieExists : function () {
    			return document.cookie != "";
    		},
    		/** 清除Cookie */
    		clear : function () {
    			var date=new Date();
                date.setTime(date.getTime() - 1);
                var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                	for (var i =  keys.length; i--;) document.cookie=keys[i] + "=; expires=" + date.toGMTString();
                }
    		}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70]: /images/20221123/f4435f74d8a3418fa2f55311dad0bead.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 1]: /images/20221123/a25e1c2c39d64116a09d3ca4a50daff1.png
[20200826115509587.png]: /images/20221123/b1b2b7d577c2459582c9a046b5cb4fa4.png
[20200826115531884.png]: /images/20221123/f7987304bf6449bc880be5f660d3d37c.png
[20200826120917685.png]: /images/20221123/490bd1a166324c90ad9b3ffcd98f31ee.png
[20200826120933216.png]: /images/20221123/8ec6d1e93cd24c0cac1133237baeb346.png
[20200826121105479.png]: /images/20221123/90ded99128624e6191ea1a40824b195c.png
[https_github.com_1711680493_ShendiWeb]: https://github.com/1711680493/ShendiWeb