doubleyong
管理员
管理员
  • 最后登录2021-09-29
  • 发帖数1035
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:383回复:0

[es5]js中的操作cookie的方法

楼主#
更多 发布于:2021-08-26 20:20

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=/";




在 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 "";
}





下面我们一起来看下更加简单方便的几种方法。



1. jQuery CookiejQuery 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属性,则删除时,同样需要传入相同的参数。







2. 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
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号