沃梦达 / IT编程 / 前端开发 / 正文

jQuery.cookie.js使用方法及相关参数解释

jQuery.cookie.js 是一个轻量级的jQuery插件,用于方便地读取、写入和删除Cookies。本攻略将详细介绍该插件的使用方法及参数解释。

jQuery.cookie.js使用方法及相关参数解释

简介

jQuery.cookie.js 是一个轻量级的jQuery插件,用于方便地读取、写入和删除Cookies。本攻略将详细介绍该插件的使用方法及参数解释。

安装

首先需要引入 jQuery 库,然后将 jquery.cookie.js 引入到 HTML 页面中。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

参数

jQuery.cookie.js 支持的参数如下:

expires

expires 用于设置过期时间,可以是数值或字符串:

$.cookie('name', 'value', { expires: 7 }); // 7天后过期
$.cookie('name', 'value', { expires: '7' }); // 与以上等效

expires 也可以设置为日期对象:

var date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7天后过期
$.cookie('name', 'value', { expires: date });

path

path 用于设置 cookie 可获取的路径:

$.cookie('name', 'value', { path: '/' });

domain

domain 用于设置 cookie 可获取的域名:

$.cookie('name', 'value', { domain: 'example.com' });

secure

secure 用于设置 cookie 仅通过 HTTPS 传输:

$.cookie('name', 'value', { secure: true });

方法

写入 Cookie

通过以下方法可以在客户端写入 Cookie:

$.cookie('name', 'value');

如果需要使用参数,则可以在第三个参数中传入参数名和值:

$.cookie('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: true });

读取 Cookie

通过以下方法可以在客户端读取 Cookie:

$.cookie('name');

删除 Cookie

通过以下方法可以在客户端删除 Cookie:

$.removeCookie('name');

如果需要使用参数,则可以在第二个参数中传入参数名和值:

$.removeCookie('name', { path: '/' });

示例

以下是两个示例,展示了如何使用 jQuery.cookie.js

示例一:记住用户

// 写入 Cookie
$.cookie('username', 'John Doe', { expires: 7 });

// 读取 Cookie
alert('Welcome back, ' + $.cookie('username') + '!');

// 删除 Cookie
$.removeCookie('username');

示例二:保存设置

// 获取用户设置(默认值为 light)
var settings = $.cookie('settings') || 'light';

// 应用设置
$('body').addClass(settings);

// 更改设置
$('#settings-link').on('click', function() {
  $('body').removeClass('light dark').addClass($(this).data('theme'));
  $.cookie('settings', $(this).data('theme'), { expires: 365, path: '/' });
});

以上示例展示了如何保存用户设置,以及如何在页面载入时读取该设置并应用。

本文标题为:jQuery.cookie.js使用方法及相关参数解释