js实现操作cookie的常见方法总结【创建、读取、删除】

所属分类: 网络编程 / JavaScript 阅读数: 341
收藏 0 赞 0 分享

本文实例讲述了js实现操作cookie的常见方法。分享给大家供大家参考,具体如下:

js操作cookie,可以通过开源的插件实现,方便快捷,兼容性好,同样也可以自己写;
此文主要介绍两个常用的插件:
Js.cookie.jsjQuery.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判断查询日期是否为有效日期

很多网站都涉及到输入日期选项,如果客户日期输入错误,可能导入查询不到甚至查询到错误的信息,为了更好的满足用户需求,需要对日期进行校验,下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多