本文详细总结了JavaScript中操作Cookie的两种常见方法，分别介绍了轻量级的js.cookie.js和基于jQuery的jquery.cookie.js插件。内容涵盖Cookie的创建、读取、删除、路径与有效期设置，以及JSON支持和全局配置等核心功能，帮助开发者快速掌握Cookie管理技巧。
本文详细介绍JavaScript中操作Cookie的几种常见实现方式，供读者参考学习。
在JavaScript中操作Cookie，既可以使用成熟的开源插件以获得便捷性和良好的兼容性，也可以自行编写代码。本文主要讲解两个广泛使用的插件：Js.cookie.js 和 jQuery.cookie.js。
0、Js.cookie.js
js.cookie.js 是一个简单且轻量级的JavaScript API，专门用于处理Cookie。
下载地址：https://github.com/js-cookie/js-cookie/releases
该插件具有以下优点：
- 兼容所有主流浏览器；
- 支持存储任意字符；
- 无需其他依赖库；
- 支持ES模块导入；
- 提供非侵入式的JSON支持；
- 允许启用自定义编码/解码功能；
0.1 基本用法
#创建Cookie：
创建一个在整个站点范围内可用的Cookie；
Cookies.set('name', 'value');创建一个有效期为4天且在整个站点范围内可用的Cookie；
Cookies.set('name', 'value', { expires: 4 });注意： expires参数的单位默认为“天”，如果需要设置小于1天的有效期，请参考以下解决方案：
//设置cookie有效期为15分钟；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {
expires: inFifteenMinutes
});创建一个有效期为4天，且仅在当前页面所在路径下有效的Cookie；
Cookies.set('name', 'value', { expires: 4, path: '' })举例说明， 若在 http://127.0.0.1/path1/test.html 页面中设置Cookie，并将path设为""，则在 http://127.0.0.1/test.html 页面中无法获取该Cookie，但在 http://127.0.0.1/path1/path2/test.html 页面中可以获取；
以下两种写法效果相同，均在整个站点范围内可用；
Cookies.set('name', 'value', { expires: 4 });
Cookies.set('name', 'value', { expires: 4, path: '/' });#读取Cookie:
读取指定名称的Cookie；
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined读取所有可见的Cookie：返回一个JSON对象；
Cookies.get() // => { name: 'value' , name1: 'value1' }#删除Cookie：
删除指定名称的Cookie；
Cookies.remove('name')删除当前页面路径下有效的Cookie；
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!注意：如果在路径path1下的页面中设置了Cookie，并将path设为path1/path2，
Cookies.set('name', 'value', { path: 'path1/path2' });则在路径path1/path2下的页面中无法直接删除该Cookie，必须回到路径path1下的页面进行删除：
Cookies.remove('name', { path: 'path1/path2' });0.2 JSON支持
创建Cookie时，可以将Array或Object作为值；
Cookies.set('name', { foo: 'bar' });读取Cookie值：
Cookies.get('name') // => '{"foo":"bar"}'
Cookies.get() // => { name: '{"foo":"bar"}' }
Cookies.getJSON('name') // => { foo: 'bar' }
Cookies.getJSON() // => { name: { foo: 'bar' } }1、jQuery.cookie.js
Jquery.cookie.js - A simple, lightweight jQuery plugin for reading, writing and deleting cookies； Jquery.cookie.js - 一个简单，轻量的jquery插件，用于cookie的读取、写入和删除操作；
下载地址：http://plugins.jquery.com/cookie/ Github地址：https://github.com/carhartl/jquery-cookie
注意：使用前需先引入jquery.js；
1.1 基本操作
#创建cookie：
创建一个在当前页面路径下有效的Cookie；
$.cookie('cookieName', 'cookieValue');此处有坑，举例说明，
在 http://127.0.0.1/path1/test.html 页面中这样设置Cookie，$.cookie('cookieName', 'cookieValue')，则在 http://127.0.0.1/test.html 页面中无法获取该Cookie，但在 http://127.0.0.1/path1/path2/test.html 页面中可以获取；
创建一个在整个站点范围内有效的Cookie；
$.cookie('name', 'value', { path: '/' });创建一个有效期为4天的Cookie；
$.cookie('cookieName', 'cookieValue', { expires: 4 });注意： expires的单位默认为“天”，如果需要设置小于1天的有效期，请参考以下解决方案：
//设置cookie有效期为15分钟；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
$.cookie('cookieName', 'cookieValue', { expires: inFifteenMinutes });创建一个Cookie，并指定其有效路径；
$.cookie('name', 'value', { expires: 4, path: '/website1' });该Cookie仅在website1站点下有效；
#读取cookie：
读取指定名称的Cookie；
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined读取所有有效的Cookie：（以json格式返回）
$.cookie(); // => { "name": "value","name1":"value1" }#删除cookie：
// 成功删除返回true，失败返回false；
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
// 删除时，必须使用创建时设置的属性值（path，domain 等）
$.cookie('name', 'value', { path: '/' });
// 失败
$.removeCookie('name'); // => false
// 成功
$.removeCookie('name', { path: '/' }); // => true1.2 全局配置
#raw
是否对Cookie进行编码；（使用encodeURIComponent/decodeURIComponent）
$.cookie.raw = true;#json
是否以json格式进行存储和读取；（假设使用JSON.stringify和JSON.parse）
$.cookie.json = true;2、参考
https://github.com/js-cookie/js-cookie https://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。