js中的操作cookie的方法
js中的操作cookie的方法
01 cookie介绍
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中，创建 cookie 如下所示：
document.cookie="username=John Doe";您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。
默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe;expires=Thu, 18 Dec 2043 12:00:00 GMT";您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";02 原生js操作cookie
在 JavaScript 中, 可以使用以下代码来读取 cookie：
var x = document.cookie;cookie 的操作,添加，修改，删除等，没有提供对应的方法，需要自己去处理document.cookie中的字符串。
可参考如下代码：
//设置cookie, 参数：键，值 ，有效时间：单位天
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}//获取cookie值
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}03 jQuery Cookie
jQuery Cookie 是一个简单、轻巧的jQuery插件，主要用于读取，编写和删除cookie。因为是主要是为了增强jQuery的功能，因此对于许多之前用过jQuery的同学而言，其使用起来更加的方便。
要想使用jQuery Cookie，首先要在页面上引入两个JS文件，
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>下面我们来看下使用jQuery Cookie是如何操作Cookie的：
//创建一个Cookie，属性默认
$.cookie('password', '123456');
//创建一个Cookie，设置属性：有效天数，path
$.cookie('attribute', 'pathDomain', { expires: 7, path: '/' });
//读取所有Cookie，返回{name1:value1,...,namen:valuen} JSON格式
$.cookie();
//获取指定name的Cookie的值
$.cookie("password");
//修改Cookie，重新创建一遍，name相同会覆盖之前Cookie，修改了过期时间
$.cookie('attribute', 'pathDomain', { expires: 14, path: '/' });
//删除Cookie，可以指定过期时间为当前时间；注意：因为过期时间以浏览器的服务器时间为准，一般会有八小时时差
$.removeCookie('password');注意：如果创建Cookie时，指定了Cookie的path和domain属性，则删除时，同样需要传入相同的参数。
04 js-cookie
js-cookie一个简单、轻巧的处理Cookie的JavaScript的API。这么看来其和jQuery Cookie相差似乎不大，两个插件的体积也都不大，压缩后都是1Kb左右，但是js-cookie的一个优势就是不需要依赖jQuery，这样我们在使用Vue等其他前端框架时可以更方便的使用。
除了上述，js-cookie官网上对其介绍如下所述：
可以在所有浏览器上工作支持任何字符
经过严格的测试没有任何依赖
支持ES模块支持AMD/CommonJS
实用的wiki文档支持自定义编码/解码
体量小
下面就让我们一起来体验下js-cookie，
首先，在页面上引入JS文件，代码如下：
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>注：引入JS文件后，可以直接使用
之后我们就可以直接使用js-cookie提供的一个Cookie对象，其中提供了许多操作Cookie的方法：
//创建一个Cookie，属性默认
Cookies.set('password', '123456');
//创建一个Cookie，设置属性：有效天数，path
Cookies.set('attribute', 'pathDomain', { expires: 7, path: '/' })
//读取所有Cookie，返回{name1:value1,...,namen:valuen} JSON格式
Cookies.get();
//获取指定name的Cookie的值
Cookies.get("password");
//修改Cookie，重新创建一遍，name相同会覆盖之前Cookie，修改了过期时间
Cookies.set('attribute', 'pathDomain', { expires: 14, path: '/' })
//删除Cookie，可以指定过期时间为当前时间；注意：因为过期时间以浏览器的服务器时间为准，一般会有八小时时差
Cookies.remove("password");我们可以发现js-cookie中的API的使用和jQuery Cookie是非常类似的，参数列表基本一致，因此使用起来也是上手很快。
需要注意的是，这里删除Cookie时，同样需要传入Cookie创建时相同的参数。
总结：
jQuery Cookie、js-cookie的使用方法，两者的使用非常类似，大家也可以根据自己的喜欢来选择，无论哪种，都会比原生的js要方便。这里还是比较推荐js-cookie，因为其不要依赖别的JS，当然还有许多别的好处。
参考：
https://www.runoob.com/js/js-cookies.html
https://blog.csdn.net/qq_34666857/article/details/105703529
腾讯云开发者
