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

jQuery Cookie 插件

原创
作者头像
陈不成i
修改于 2021-07-22 06:29:06
修改于 2021-07-22 06: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
运行
AI代码解释
复制
$.cookie('name', 'value');

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

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

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

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

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

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

读取 cookie:

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

读取所有的 cookie 信息:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$.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
运行
AI代码解释
复制
$(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 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js中的操作cookie的方法
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
用户9914333
2022/07/22
5.3K0
jQuery 教程
菜鸟教程 — jQuery 教程:https://www.runoob.com/jquery/jquery-tutorial.html
全栈程序员站长
2022/09/03
17.1K0
jQuery 教程
jQuery 简介
https://www.runoob.com/jquery/jquery-syntax.html
zhangjiqun
2024/12/17
860
jQuery 简介
bootstrap 文本处理
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
用户5760343
2022/01/10
1.3K0
bootstrap 文本处理
JQuery之cookie增删改查操作
本文介绍了JQuery中cookie的增删改查操作,包括创建、读取、更新和删除cookie,以及使用cookie进行用户登录态的存储和验证。还介绍了cookie的常见属性和参数,如有效时间、路径、安全性和raw参数等。
林老师带你学编程
2018/01/03
1.6K0
JQuery之cookie增删改查操作
自己搭建在线IDE
之前,我看过各种OJ(OpenJudge) 但是,还是没有自己做的好。 所以,我就来写了这篇教程。 环境 这次,我打算使用这些: PHP 5.6 Nginx/Apache Python Python可以使用命令 For Ubuntu/Debian: apt install python3 -y For CentOS: yum install python3 -y 那么,环境安装就结束了 代码部分 刚刚,我们准备好了环境,现在就是代码部分。 因为OJ需要在线运行代码的能力,所以我们在站点根目录下新建一个文件
ZC.TigerRoot
2020/04/30
2.8K0
自己搭建在线IDE
jquery 本地存储 cookie 的基本用法
本地存储分为cookie,以及新增的localStorage和sessionStorage 。本篇章专门来讲讲 cookie
Devops海洋的渔夫
2019/05/30
2K0
button元素的id与onclick的函数名字相同 导致方法失效的问题
需求需要在原先页面添加一个按钮,触发一个function,如此简单的操作,却无意间发现了一个问题。(还是对html了解的太少)
陈灬大灬海
2019/01/28
1.7K0
button元素的id与onclick的函数名字相同 导致方法失效的问题
bootstrap 字体图标
图标列表:https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
用户5760343
2022/01/10
1.3K0
bootstrap 字体图标
JQuery的安装与下载教程
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
全栈程序员站长
2022/08/18
1.3K0
JQuery的安装与下载教程
JavaScript - 测试 jQuery
为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:
陈不成i
2021/07/21
6110
通过CDN引入jQuery的几种方式
百度 CDN <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> 新浪 CDN <head> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> 又拍云 CDN <head> <script src="
Leophen
2019/08/23
8.8K0
jQuery下载和安装详细教程[通俗易懂]
我们可以到jQuery的官网下载jQuery文件(PS:其实jQuery就是一个封装了很多函数的js文件,把这个js文件导入到网页中就可以了)。
全栈程序员站长
2022/08/18
2K0
python测试开发django-113.使用Bootstrap框架
前端页面开发用到bootstrap框架,有2种实现方式: 1.直接在html头部导入css和js文件 2.下载bootstarp课件源码到项目本地放到static目录
上海-悠悠
2021/09/14
3190
生成二维码的 jQuery 插件:jquery.qrcode.js
jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件,它使用非常简单,生成的 QRcode 无需下载图片,并且不依赖第三方服务,比如最近 Google 服务在国内访问不稳就造成我好几个网站的 QRcode 不能使用,并且压缩之后大小小于 4K。
Denis
2023/04/15
1.5K0
jQuery 安装
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
陈不成i
2021/07/21
4730
探索 JQuery EasyUI:构建简单易用的前端页面
当我们站在网页开发的浩瀚世界中,眼花缭乱的选择让我们难以抉择。而就在这纷繁复杂的技术海洋中,JQuery EasyUI 如一位指路明灯,为我们提供了一条清晰的航线。
繁依Fanyi
2024/04/25
6350
jquery点击删除按钮,删除当前的div
现在有多行div,共用一个删除事件,点击删除的时候,会把页面所有的div全都删掉了,但是我只需要点击哪一行div里面的删除按钮,就删除哪一行,其实很简单,只需要写一个this事件即可。
王小婷
2019/07/08
5.3K0
ASP.NET Core微服务(四)——【静态vue使用axios解析接口】
bootstrap-css:【<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">】
红目香薰
2022/11/28
4950
JavaScript|jQuery基础语法
jQuery 是一个 JavaScript 库,它极大地简化了 JavaScript 编程。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
算法与编程之美
2020/07/28
8000
JavaScript|jQuery基础语法
相关推荐
js中的操作cookie的方法
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文