社区首页 >专栏 >js中的操作cookie的方法

js中的操作cookie的方法

用户9914333

发布于 2022-07-22 06:46:37

5.2K00

代码可运行

文章被收录于专栏：bug收集bug收集

运行总次数：0

代码可运行

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");