js实现操作cookie的常见方法总结【创建、读取、删除】
本文实例讲述了js实现操作cookie的常见方法。分享给大家供大家参考,具体如下:
js操作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模块;
- Unobtrusive JSON support;
- Enable custom encoding/decoding;
0.1 基本用法
#创建Cookie:
创建一个cookie,整个站点可用;
Cookies.set('name', 'value');
创建一个cookie,有效期为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,有效期为4天,且只在当前页面所在的路径有效;
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的;
下面的两种写法,效果是一样的,整个站点可用;
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,路径设为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,全站点有效;
$.cookie('name', 'value', { path: '/' });
创建一个cookie,有效期为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,并设置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: '/' }); // => true
1.2 全局配置
#raw
cookie是否编码;(using encodeURIComponent/decodeURIComponent)
$.cookie.raw = true;
#json
是否以json格式进行存储和读取;(Assumes JSON.stringify and 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程序设计有所帮助。
您可能感兴趣的文章:
- javascript创建cookie、读取cookie
- asp.net通过js实现Cookie创建以及清除Cookie数组的代码
- 什么是cookie?js手动创建和存储cookie
- javascript创建和存储cookie示例
- JavaScript创建、读取和删除cookie
- JavaScript创建一个欢迎cookie弹出窗实现代码
- javascript学习笔记(七)利用javascript来创建和存储cookie
- JS设置cookie、读取cookie、删除cookie
- JS操作Cookies包括(读取添加与删除)
- JS保存和删除cookie操作 判断cookie是否存在
- javascript js cookie的存储,获取和删除
- javascript cookies 设置、读取、删除实例代码
- JavaScript_ Js操作Cookie总结(设置,读取,删除)
- js设置cookie JS操作cookies方法 写入读取与删除
- Javascript(JS)对Cookie的读取、删除、写入操作帮助方法
- 【方法总结】创建、读取、删除文件相关操作
- 这是一个关于XML文档的操作管理器XMLHelper类,类中包括XML文档的创建,文档节点和属性的读取,添加,修改,删除的方法功能的实现
- Jquery和js实现cookie操作手机浮层广告;附加:js获取、添加、删除cookie
- js创建类的几种常见方法总结
- ASP.NET实现Cookie功能的三个基本操作(写入,读取,删除)
- JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
- jQuery常见操作实现和常用函数方法总结
- JS封装cookie操作函数实例(设置、读取、删除)
- Python实现二叉树的常见遍历操作总结【7种方法】
- JS操作Cookie写入和读取的简便方法(一看就懂,直接能用!)!
- Servlet实现Cookie的创建,读取,删除
- js操作cookie:设置、读取、删除
- Servlet实现Cookie的创建,读取,删除
- 封装处理表单删除操作的实现方法(Angular js+Mybatis)
- Halcon对文件的创建、读取、写入、删除等操作总结
- js操作cookie——读取、添加、删除
- 用jquery实现cookie的操作以及创建js数组和遍历js数组,js对象,jquery.json的使用