首页 >> js开发 >> JavaScriptjs实现操作cookie的常见方法总结【创建、读取、删除】
JavaScriptjs实现操作cookie的常见方法总结【创建、读取、删除】
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了js实现操作cookie的常见方法。分享给大家供大家参考，具体如下：js操作cookie，可以通过开源的插件实现，方便快捷，兼容性好，同样也可以自己写；
此文主要介绍两个常用的插件：
Js.cookie.js 和 jQuery.cookie.jsJs.cookie.jsjQuery.cookie.js0、Js.cookie.js
js.cookie.js : 一个简单，轻量级的JavaScript API，用于处理cookie;
js.cookie.js : 一个简单，轻量级的JavaScript API，用于处理cookie;下载地址：https://github.com/js-cookie/js-cookie/releaseshttps://github.com/js-cookie/js-cookie/releases优点：
适用于所有浏览器；
接受任何字符；
没有依赖；
支持ES模块；
Unobtrusive JSON support；
Enable custom encoding/decoding；
适用于所有浏览器；接受任何字符；没有依赖；支持ES模块；Unobtrusive JSON support；Enable custom encoding/decoding；0.1 基本用法#创建Cookie：创建一个cookie，整个站点可用；
Cookies.set('name', 'value');
Cookies.set('name', 'value');创建一个cookie，有效期为4天，整个站点可用；
Cookies.set('name', 'value', { expires: 4 });
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
});
//设置cookie有效期为15分钟；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {
expires: inFifteenMinutes
});创建一个cookie，有效期为4天，且只在当前页面所在的路径有效；
Cookies.set('name', 'value', { expires: 4, path: '' })
Cookies.set('name', 'value', { expires: 4, path: '' })举例解释一下，
在 http://127.0.0.1/path1/test.html页面中设置cookie，且cookie的path设为"",那么在 http://127.0.0.1/test.html 这个页面中是获取不到那个cookie的，而在 http://127.0.0.1/path1/path2/test.html 这个页面中是可以获取到那个cookie的；http://127.0.0.1/path1/test.htmlhttp://127.0.0.1/test.htmlhttp://127.0.0.1/path1/path2/test.html下面的两种写法，效果是一样的，整个站点可用；
Cookies.set('name', 'value', { expires: 4 });
Cookies.set('name', 'value', { expires: 4, path: '/' });
Cookies.set('name', 'value', { expires: 4 });
Cookies.set('name', 'value', { expires: 4, path: '/' });#读取Cookie:读取某个cookie：
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined读取所有可见cookie：返回的是个json对象；
Cookies.get() // => { name: 'value' , name1: 'value1' }
Cookies.get() // => { name: 'value' , name1: 'value1' }#删除Cookie：删除某个cookie：
Cookies.remove('name')
Cookies.remove('name')删除当前页面所在路径下某个有效的cookie：
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!注意：在路径path1下的页面中设置了个cookie，路径设为path1/path2
Cookies.set('name', 'value', { path: 'path1/path2' });
Cookies.set('name', 'value', { path: 'path1/path2' });但在路径path1/path2中的页面中是无法删除这个cookie的，只能到路径path1下的页面中去删除：
Cookies.remove('name', { path: 'path1/path2' });
Cookies.remove('name', { path: 'path1/path2' });0.2 JSON支持当穿件cookie时，可以将Array或Object作为值；
Cookies.set('name', { foo: 'bar' });
Cookies.set('name', { foo: 'bar' });读取cookie值：
Cookies.get('name') // => '{"foo":"bar"}'
Cookies.get() // => { name: '{"foo":"bar"}' }
Cookies.get('name') // => '{"foo":"bar"}'
Cookies.get() // => { name: '{"foo":"bar"}' }
Cookies.getJSON('name') // => { foo: 'bar' }
Cookies.getJSON() // => { 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的读取、写入和删除操作；
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-cookiehttp://plugins.jquery.com/cookie/https://github.com/carhartl/jquery-cookie注意：使用之前要引入jquery.js;1.1 基本操作#创建cookie：创建一个cookie，当前页面路径有效；
$.cookie('cookieName', 'cookieValue');
$.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的；坑http://127.0.0.1/path1/test.htmlhttp://127.0.0.1/test.htmlhttp://127.0.0.1/path1/path2/test.html创建一个cookie，全站点有效；
$.cookie('name', 'value', { path: '/' });
$.cookie('name', 'value', { path: '/' });创建一个cookie，有效期为4天；
$.cookie('cookieName', 'cookieValue', { expires: 4 });
$.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有效期为15分钟；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
$.cookie('cookieName', 'cookieValue', { expires: inFifteenMinutes });创建一个cookie，并设置cookie的有效路径：
$.cookie('name', 'value', { expires: 4, path: '/website1' });
$.cookie('name', 'value', { expires: 4, path: '/website1' });该cookie只在website1站点下有效；#读取cookie：读取某个cookie：
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined读取所有有效的cookie：（json格式）
$.cookie(); // => { "name": "value","name1":"value1" }
$.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: '/' }); // => true
// 成功删除返回true，失败返回false；
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
// 删除时，必须使用创建时设置的属性值（path，domain 等）
$.cookie('name', 'value', { path: '/' });
// 失败
$.removeCookie('name'); // => false
// 成功
$.removeCookie('name', { path: '/' }); // => true1.2 全局配置#rawcookie是否编码；（using encodeURIComponent/decodeURIComponent）
$.cookie.raw = true;
$.cookie.raw = true;#json是否以json格式进行存储和读取；（Assumes JSON.stringify and JSON.parse）
$.cookie.json = true;
$.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-deletedhttps://github.com/js-cookie/js-cookiehttps://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript查找算法技巧总结JavaScript动画特效与技巧汇总JavaScript错误与调试技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
此文主要介绍两个常用的插件：
Js.cookie.js 和 jQuery.cookie.jsJs.cookie.jsjQuery.cookie.js0、Js.cookie.js
js.cookie.js : 一个简单，轻量级的JavaScript API，用于处理cookie;
js.cookie.js : 一个简单，轻量级的JavaScript API，用于处理cookie;下载地址：https://github.com/js-cookie/js-cookie/releaseshttps://github.com/js-cookie/js-cookie/releases优点：
适用于所有浏览器；
接受任何字符；
没有依赖；
支持ES模块；
Unobtrusive JSON support；
Enable custom encoding/decoding；
适用于所有浏览器；接受任何字符；没有依赖；支持ES模块；Unobtrusive JSON support；Enable custom encoding/decoding；0.1 基本用法#创建Cookie：创建一个cookie，整个站点可用；
Cookies.set('name', 'value');
Cookies.set('name', 'value');创建一个cookie，有效期为4天，整个站点可用；
Cookies.set('name', 'value', { expires: 4 });
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
});
//设置cookie有效期为15分钟；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {
expires: inFifteenMinutes
});创建一个cookie，有效期为4天，且只在当前页面所在的路径有效；
Cookies.set('name', 'value', { expires: 4, path: '' })
Cookies.set('name', 'value', { expires: 4, path: '' })举例解释一下，
在 http://127.0.0.1/path1/test.html页面中设置cookie，且cookie的path设为"",那么在 http://127.0.0.1/test.html 这个页面中是获取不到那个cookie的，而在 http://127.0.0.1/path1/path2/test.html 这个页面中是可以获取到那个cookie的；http://127.0.0.1/path1/test.htmlhttp://127.0.0.1/test.htmlhttp://127.0.0.1/path1/path2/test.html下面的两种写法，效果是一样的，整个站点可用；
Cookies.set('name', 'value', { expires: 4 });
Cookies.set('name', 'value', { expires: 4, path: '/' });
Cookies.set('name', 'value', { expires: 4 });
Cookies.set('name', 'value', { expires: 4, path: '/' });#读取Cookie:读取某个cookie：
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined读取所有可见cookie：返回的是个json对象；
Cookies.get() // => { name: 'value' , name1: 'value1' }
Cookies.get() // => { name: 'value' , name1: 'value1' }#删除Cookie：删除某个cookie：
Cookies.remove('name')
Cookies.remove('name')删除当前页面所在路径下某个有效的cookie：
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!注意：在路径path1下的页面中设置了个cookie，路径设为path1/path2
Cookies.set('name', 'value', { path: 'path1/path2' });
Cookies.set('name', 'value', { path: 'path1/path2' });但在路径path1/path2中的页面中是无法删除这个cookie的，只能到路径path1下的页面中去删除：
Cookies.remove('name', { path: 'path1/path2' });
Cookies.remove('name', { path: 'path1/path2' });0.2 JSON支持当穿件cookie时，可以将Array或Object作为值；
Cookies.set('name', { foo: 'bar' });
Cookies.set('name', { foo: 'bar' });读取cookie值：
Cookies.get('name') // => '{"foo":"bar"}'
Cookies.get() // => { name: '{"foo":"bar"}' }
Cookies.get('name') // => '{"foo":"bar"}'
Cookies.get() // => { name: '{"foo":"bar"}' }
Cookies.getJSON('name') // => { foo: 'bar' }
Cookies.getJSON() // => { 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的读取、写入和删除操作；
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-cookiehttp://plugins.jquery.com/cookie/https://github.com/carhartl/jquery-cookie注意：使用之前要引入jquery.js;1.1 基本操作#创建cookie：创建一个cookie，当前页面路径有效；
$.cookie('cookieName', 'cookieValue');
$.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的；坑http://127.0.0.1/path1/test.htmlhttp://127.0.0.1/test.htmlhttp://127.0.0.1/path1/path2/test.html创建一个cookie，全站点有效；
$.cookie('name', 'value', { path: '/' });
$.cookie('name', 'value', { path: '/' });创建一个cookie，有效期为4天；
$.cookie('cookieName', 'cookieValue', { expires: 4 });
$.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有效期为15分钟；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
$.cookie('cookieName', 'cookieValue', { expires: inFifteenMinutes });创建一个cookie，并设置cookie的有效路径：
$.cookie('name', 'value', { expires: 4, path: '/website1' });
$.cookie('name', 'value', { expires: 4, path: '/website1' });该cookie只在website1站点下有效；#读取cookie：读取某个cookie：
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined读取所有有效的cookie：（json格式）
$.cookie(); // => { "name": "value","name1":"value1" }
$.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: '/' }); // => true
// 成功删除返回true，失败返回false；
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
// 删除时，必须使用创建时设置的属性值（path，domain 等）
$.cookie('name', 'value', { path: '/' });
// 失败
$.removeCookie('name'); // => false
// 成功
$.removeCookie('name', { path: '/' }); // => true1.2 全局配置#rawcookie是否编码；（using encodeURIComponent/decodeURIComponent）
$.cookie.raw = true;
$.cookie.raw = true;#json是否以json格式进行存储和读取；（Assumes JSON.stringify and JSON.parse）
$.cookie.json = true;
$.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-deletedhttps://github.com/js-cookie/js-cookiehttps://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript查找算法技巧总结JavaScript动画特效与技巧汇总JavaScript错误与调试技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
