浏览器中使用浏览器中使用JS操作操作Cookie详解详解
浏览器中如何操作浏览器中如何操作Cookie??
关于Cookie的概念和应用,大家可以看看我前面的几篇文章。并且在Cookie详解这篇文章中,介绍了如何在服务器端和使用JavaScript创建Cookie,并设置属性。
我们知道,Cookie是存储在客户端的,并且现在前后端分离慢慢变得流行起来,因此如何在浏览器上可以使用方便快捷的操作Cookie变得尤为重要。使用原生JS操作方法在上篇文章
中已经写过,原生JS虽然更简单,但是操作起来还是比较费力的,下面我们一起来看下更加简单方便的几种方法。
1.jQuery Cookie
jQuery Cookie是一个简单、轻巧的jQuery插件,主要用于读取,编写和删除cookie。因为是主要是为了增强jQuery的功能,因此对于许多之前用过jQuery的同学而言,其使用起来更
加的方便。
要想使用jQuery Cookie,首先要在页面上引入两个JS文件,代码如下:
下面我们来看下使用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');
上面即是jQuery Cookie使用的示例代码,我们将其在Chrome的控制台中运行,执行过程如下图所示:
我们来看下Application中的Cookie信息。
下面注意看咯,在控制台中执行$.removeCookie('attribute');,返回的结果和刚才执行$.removeCookie('password');怎么不一样了?
这里大家需要注意,如果创建Cookie时,指定了Cookie的path和domain属性,则删除时,同样需要传入相同的参数。
2.js-cookie
评论0