前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >jQuery Cookie 插件

jQuery Cookie 插件

原创
作者头像
陈不成i
修改2021-07-22 14:29:06
修改2021-07-22 14:29:06
6K00
代码可运行
举报
文章被收录于专栏:ops技术分享ops技术分享
运行总次数:0
代码可运行

Query 可以通过 jquery.cookie.js 插件来操作 Cookie。

官方地址http://plugins.jquery.com/cookie/

Github 地址https://github.com/carhartl/jquery-cookie

使用 jquery.cookie.js 之前需要先引入 jQuery:

<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.cookie.js"></script>

我们可以使用第三方资源库引入这两个文件:

<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>


使用方法

创建 cookie:

代码语言:javascript
代码运行次数:0
运行
复制
$.cookie('name', 'value');

如果未指定过期时间,则会在关闭浏览器或过期。

创建 cookie,并设置 7 天后过期:

代码语言:javascript
代码运行次数:0
运行
复制
$.cookie('name', 'value', { expires: 7 });

创建 cookie,并设置 cookie 的有效路径,路径为网站的根目录:

代码语言:javascript
代码运行次数:0
运行
复制
$.cookie('name', 'value', { expires: 7, path: '/' });

注:在默认情况下,只有设置 cookie 的网页才能读取该 cookie。如果想让一个页面读取另一个页面设 置的cookie,必须设置 cookie 的路径。cookie 的路径用于设置能够读取 cookie 的顶级目录。将这 个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突)。

读取 cookie:

代码语言:javascript
代码运行次数:0
运行
复制
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

读取所有的 cookie 信息:

代码语言:javascript
代码运行次数:0
运行
复制
$.cookie(); // => { "name": "value" }

删除 cookie:

// cookie 删除成功返回 true,否则返回 false $.removeCookie('name'); // => true $.removeCookie('nothing'); // => false // 写入使用了 path时,读取也需要使用相同的属性 (path, domain) $.cookie('name', 'value', { path: '/' }); // 以下代码【删除失败】 $.removeCookie('name'); // => false // 以下代码【删除成功】 $.removeCookie('name', { path: '/' }); // => true

注意:删除 cookie 时,必须传递用于设置 cookie 的完全相同的路径,域及安全选项。

代码语言:javascript
代码运行次数:0
运行
复制
$(document).ready(function(){
  $.cookie('name', 'runoob');  // 创建 cookie
  name = $.cookie('name');     // 读取 cookie
  $("#test").text(name);
  $.cookie('name2', 'runoob2', { expires: 7, path: '/' });
  name2 = $.cookie('name2');
  $("#test2").text(name2);
});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档