Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery Cookie 插件

jQuery Cookie 插件

原创
作者头像
陈不成i
修改于 2021-07-22 06:29:06
修改于 2021-07-22 06:29:06
6.2K00
代码可运行
举报
文章被收录于专栏: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 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JQuery之cookie增删改查操作
本文介绍了JQuery中cookie的增删改查操作,包括创建、读取、更新和删除cookie,以及使用cookie进行用户登录态的存储和验证。还介绍了cookie的常见属性和参数,如有效时间、路径、安全性和raw参数等。
林老师带你学编程
2018/01/03
1.6K0
JQuery之cookie增删改查操作
js中的操作cookie的方法
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
用户9914333
2022/07/22
5.3K0
bootstrap 文本处理
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
用户5760343
2022/01/10
1.4K0
bootstrap 文本处理
jQuery 教程
菜鸟教程 — jQuery 教程:https://www.runoob.com/jquery/jquery-tutorial.html
全栈程序员站长
2022/09/03
17.4K0
jQuery 教程
bootstrap 字体图标
图标列表:https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
用户5760343
2022/01/10
1.4K0
bootstrap 字体图标
生成二维码的 jQuery 插件:jquery.qrcode.js
jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件,它使用非常简单,生成的 QRcode 无需下载图片,并且不依赖第三方服务,比如最近 Google 服务在国内访问不稳就造成我好几个网站的 QRcode 不能使用,并且压缩之后大小小于 4K。
Denis
2023/04/15
1.6K0
jQuery下载和安装详细教程[通俗易懂]
我们可以到jQuery的官网下载jQuery文件(PS:其实jQuery就是一个封装了很多函数的js文件,把这个js文件导入到网页中就可以了)。
全栈程序员站长
2022/08/18
2K0
jQuery 安装
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
陈不成i
2021/07/21
4800
jQuery 简介
https://www.runoob.com/jquery/jquery-syntax.html
zhangjiqun
2024/12/17
1410
jQuery 简介
通过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.9K0
python测试开发django-113.使用Bootstrap框架
前端页面开发用到bootstrap框架,有2种实现方式: 1.直接在html头部导入css和js文件 2.下载bootstarp课件源码到项目本地放到static目录
上海-悠悠
2021/09/14
3300
RTSP协议TSINGSEE青犀视频平台EasyNVR如何通过GET传值的方式获取通过登录鉴权
由于浏览器的安全限制的成都越来越高,尤其是设计到跨域的数据调用问题,限制要求也是越来越严格。而EasyNVR作为能力层,需要进行接口的调用,因此在调用接口进行token验证往往也是存在很多不方便的地方。
EasyNVR
2020/11/13
1.2K0
RTSP协议TSINGSEE青犀视频平台EasyNVR如何通过GET传值的方式获取通过登录鉴权
bootstrap 常用导航菜单样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标签页与胶囊式标签页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
用户5760343
2019/07/05
6.3K0
jQuery基础
使用jQuery时, $ 是访问jQuery的标志,但是如果有其他方法与jQuery中的 $冲突时,可以释放$的使用权 ,还可以自定义一个符号来代替 $使用。
不愿意做鱼的小鲸鱼
2022/08/24
1.8K0
jQuery基础
python web开发 jQuery基础
大多数情况下, jQuery 函数位于 document ready 函数中,防止没有加载完成就对不存在的元素进行操作
Michael阿明
2022/01/07
4.4K0
python web开发 jQuery基础
非常漂亮的图片灯箱JS插件
前言: 前端最重要的就是美感,图片的显示也需要,博主在此分享一款灯箱JS插件,非常简单的调用即可实现全局的图片灯箱。 优势介绍 无需其他JavaScript编码 没有其他HTML片段 没有额外的CSS资源 没有其他图标/资产 无需额外处理动态内容和事件侦听器 效果图 调用方法 将以下代码插入到HTML底部</body>前即可。 代码 <!-- 插件依赖Jquery --> <!-- <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.
骤雨重山
2022/01/17
8.7K0
非常漂亮的图片灯箱JS插件
JQuery的安装与下载教程
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
全栈程序员站长
2022/08/18
1.3K0
JQuery的安装与下载教程
JavaScript|jQuery基础语法
jQuery 是一个 JavaScript 库,它极大地简化了 JavaScript 编程。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
算法与编程之美
2020/07/28
8230
JavaScript|jQuery基础语法
bootstrap 表单 3 按钮
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
用户5760343
2022/01/10
1.5K0
bootstrap 表单 3 按钮
jquery 本地存储 cookie 的基本用法
本地存储分为cookie,以及新增的localStorage和sessionStorage 。本篇章专门来讲讲 cookie
Devops海洋的渔夫
2019/05/30
2K0
相关推荐
JQuery之cookie增删改查操作
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验