Cookie是什么？

cookie其实就是一些数据信息，类型为“小型文本文件”，存储于电脑上的文本文件中。

Cookie有什么用？

在编程领域，Cookie 代表一种小型的文本文件，可以让开发人员在用户计算机上存储少量的数据（大约 4kb）
记录用户的某些信息，例如用户身份、喜好等，当用户下次访问网站时，网站可以通过检索这些信息来为用户展示个性化页面。
当我们打开一个网站时，如果这个网站我们曾经登录过，那么当我们再次打开网站时，就不需要再次登录了。例如bilibili，csdn等网站。

Js创建Cookie

在 JavaScript 中，您可以通过document.cookie属性来创建、读取、修改和删除 Cookie 信息。

创建（设置）新的 Cookie 信息，需要以name=value形式的字符串来定义新的 Cookie 信息，如下例所示：

1
2
3

document.cookie = "username = AliveSeven";

document.cookie = "age = 21";

假设在A页面中要保存变量username的值(“jack”)到cookie中,key值为name，则相应的JS代码为：

1	document.cookie="name="+username;

注意:

在 cookie 的名称或值中不能使用分号、逗号或空格。如果想存入这些符号，需要使用 escape() 函数进行编码。

例如：

document.cookie=”str=”+escape(“username=AliveSeven”)，该代码等效于：

document.cookie=”str=username%3DAliveSeven”，即等号被编码为%3D。

当使用 escape() 编码后，在取出值以后需要使用 unescape() 进行解码才能得到原来的 cookie 值。

或者使用encodeURIComponent()函数也可以存储带分号、逗号和空格的数据，同样也要使用对应的decodeURIComponent() 函数来解析 Cookie 数据。如果要编码整个URL，那就用encodeURI方法。

Cookie的时效性

Cookie 并不会一直存在，默认情况下，Cookie 的生命周期就是浏览器的会话周期，即用户关闭浏览器后，Cookie 就会失效。

如果想要延长 Cookie 的生命周期，您可以使用 max-age 属性来指定 Cookie 可以存在的时间（单位为秒），默认为 -1，即关闭浏览器后失效。

如果将 max-age 设置为一个负数，则表示该 Cookie 为临时 Cookie，关闭浏览器后就会失效。如果设置为 0，则表示删除该 Cookie。若要将 Cookie 的生命周期设置为 30 天的话，则可以像下面这样：

1	document.cookie = "url = https://AliveSeven.github.io/; max-age=" + 302460*60;

此外，您也可以使用 expires 属性来指定 Cookie 失效的具体日期（GMT/UTC 格式），如下所示：

var today = new Date();
today.setDate(today.getDate()+10); //访问页面后的10天过期
//设置cookie的有效时间，时间为字符串格式
document.cookie = 'username = AliveSeven ; expires='+ today.toGMTString();

document.cookie = "url = https://AliveSeven.github.io/; expires=Sun, 28 Oct 2022 12:00:00 UTC;";

Js获取Cookie

读取（获取） Cookie 同样使用document.cookie即可，该属性会返回一个字符串，字符串中包含除 max-age、expires、path 和 domain 等属性之外的所有 Cookie 信息。

为了获取单个 Cookie 的值，我们可以通过 split() 函数将包含 Cookie 信息的字符串拆分为数组，然后再获取某个 Cookie 的值。

      document.cookie = "username = AliveSeven ; age = 21 ; max-age = " + 30*24*60*60;
      document.cookie = "age = 21";
      document.cookie = "url = https://AliveSeven.github.io/; max-age=" + 30*24*60*60;
      var str = document.cookie;
      // 拆分 cookie 字符串
      var array = str.split(";");
      for(var i = 0 ; i < array.length ; i++){
		// console.log(array[i]);
		var array2 = array[i].split("=");
              var getCookie = array2[0]+":"+decodeURIComponent(array2[1]) //解码
		console.log(getCookie.trim()); // 去除开头的空格
}

Js修改或更新Cookie

如果要改变一个 cookie 值，只需对它重新赋值，例如：document.cookie="age=23";这样就可以修改前面设置的 age=21 的 cookie 值。

Js删除Cookie

删除 Cookie 与修改 Cookie 类似，只需要重新将 Cookie 的值设置为空，并将 expires 属性设置为一个过去的日期即可。

另外，也可通过将 max-age 属性设置为 0 来删除 Cookie。

// 创建一个 Cookie
document.cookie = "url = https://AliveSeven.github.io/; path=/; max-age=" + 30*24*60*60;
// 删除这个 Cookie
document.cookie = "url=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

使用插件实现Cookie的操作

js.cookie.js : 一个简单，轻量级的JavaScript API，用于处理cookie;

开源地址：https://github.com/js-cookie/js-cookie

下载：https://github.com/js-cookie/js-cookie/releases

优点：

适用于所有浏览器；
接受任何字符；
没有依赖；
支持ES模块；
Unobtrusive JSON support；
Enable custom encoding/decoding；

创建Cookie

创建一个cookie，整个站点可用；

1	Cookies.set('name', 'value');

创建一个cookie，有效期为7天，整个站点可用；

1	Cookies.set('name', 'value', { expires: 7 });

注意：
expires的单位默认为“天”，那如何设置有效期小于1天呢？
解决方案：

//设置cookie有效期为15分钟；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {
  expires: inFifteenMinutes
});

创建一个cookie，有效期为7天，且只在当前页面所在的路径有效；

1	Cookies.set('name', 'value', { expires: 7, path: '' })

获取Cookie

读取某个cookie：

1 2	Cookies.get('name') // => 'value' Cookies.get('nothing') // => undefined

读取所有可见cookie：返回的是个json对象；

1	Cookies.get() // => { name: 'value' , "name1":"value1" }

删除Cookie

删除某个cookie：

1	Cookies.remove('name')

删除当前页面所在路径下某个有效的cookie：

1
2
3

Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!

Jquery.cookie.js - 一个简单，轻量的jquery插件，用于cookie的读取、写入和删除操作；

开源地址：https://github.com/carhartl/jquery-cookie

下载地址：http://plugins.jquery.com/cookie/

注意：使用之前要引入jquery.js;

创建Cookie

创建一个cookie，当前页面路径有效；

1	$.cookie('cookieName', 'cookieValue');

创建一个cookie，全站点有效：

1	$.cookie('name', 'value', { path: '/' });

创建一个cookie，有效期为7天；

1	$.cookie('cookieName', 'cookieValue', { expires: 7 });

注意：
expires的单位默认为“天”，那如何设置有效期小于1天呢？
解决方案如下：

1
2
3

//设置cookie有效期为15分钟；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
$.cookie('cookieName', 'cookieValue', { expires: inFifteenMinutes });

创建一个cookie，并设置cookie的有效路径：

1	$.cookie('name', 'value', { expires: 4, path: '/website1' });

获取Cookie

读取某个cookie：

1 2	$.cookie('name'); // => "value" $.cookie('nothing'); // => undefined

读取所有有效的cookie：（json格式）

1	$.cookie(); // => { "name": "value","name1":"value1" }

删除Cookie

// 成功删除返回true，失败返回false；
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

// 删除时，必须使用创建时设置的属性值（path，domain 等）
$.cookie('name', 'value', { path: '/' });
// 失败
$.removeCookie('name'); // => false
// 成功
$.removeCookie('name', { path: '/' }); // => true

全局配置

raw

cookie是否编码；（using encodeURIComponent/decodeURIComponent）

1	$.cookie.raw = true;

#json

是否以json格式进行存储和读取；（Assumes JSON.stringify and JSON.parse）

1	$.cookie.json = true;

参考：

https://www.it610.com/article/1538766788089638912.htm

https://www.jb51.net/article/182552.htm

Cookie是什么？

Cookie有什么用？

Js创建Cookie

Cookie的时效性

Js获取Cookie

Js修改或更新Cookie

Js删除Cookie

使用插件实现Cookie的操作

Js.cookie.js

创建Cookie

获取Cookie

删除Cookie

jQuery.cookie.js

创建Cookie

获取Cookie

删除Cookie

全局配置

raw

#json