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


js操作cookie(创建、读取、删除)方法总结的更多相关文章

  1. js cookie创建读取删除函数封装

    js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

  2. jQuery 操作Cookie 存储 读取 删除等

    <script type="text/javascript" src="/UI.Web.CRM.Main/js/jquery-2.1.1.min.js"& ...

  3. JS设置cookie、读取cookie、删除cookie(转)

    JS设置cookie.读取cookie.删除cookie 转载  2015-04-17   投稿:hebedich    我要评论 Js操作Cookie总结(设置,读取,删除),工作中经常会用到的哦! ...

  4. JS设置cookie、读取cookie、删除cookie

    JS设置cookie.读取cookie.删除cookie       JS设置cookie,注意一定要path=/ ,根目录,不然其他目录可能查询不到..默认是本目录. document.cookie ...

  5. JS操作cookie以及本地存储(sessionStorage 和 localStorage )

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  6. jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  7. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  8. js操作cookie,实现登录密码保存 [转]

    转自:http://blog.csdn.net/zyujie/article/details/8727828 ( 谢谢博主了) js操作cookie,实现登录密码保存.cookie的存放方式是以键值对 ...

  9. js操作cookie(转载:经测试可用)

    /***js操作cookie,star***/ function addCookie(objName,objValue,objsec){//添加cookie  var str = objName + ...

随机推荐

  1. ASP.NET Core 框架本质学习

    本文作为学习过程中的一个记录. 学习文章地址: https://www.cnblogs.com/artech/p/inside-asp-net-core-framework.html 一. ASP.N ...

  2. 扩展GroupBox控件

    1.GroupBox的边框颜色可以自行设置: 2.GroupBox可以设置边框的为圆角: 3.设置GroupBox标题在控件中的位置. 4.设置GroupBox标题的字体和颜色. 具体实现步骤Pane ...

  3. scrapy xpath用法

    一.实验环境 1.Windows7x64_SP1 2.anaconda3 + python3.7.3(anaconda集成,不需单独安装) 3.scrapy1.6.0 二.用法举例 1.开启scrap ...

  4. python小白手册之远程链接转换

    访问顺序补充

  5. vue 使用gojs绘制简单的流程图

    在vue项目中需要展示工作流进度,可以使用的流程图插件很多 flowchart.js  http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chart ...

  6. 强烈推荐 GitHub 上值得前端学习的开源实战项目

    强烈推荐 GitHub 上值得前端学习的开源实战项目. Vue.js vue-element-admin 是一个后台前端解决方案,它基于和 element-ui 实现 基于 iView 的 Vue 2 ...

  7. 【畅通工程 HDU - 1232 】【并查集模板】

    并查集讲解和模板 有一个博文对此分析的很透彻,附链接 为避免原链接失效,现摘录如下: 为了解释并查集的原理,我将举一个更有爱的例子. 话说江湖上散落着各式各样的大侠,有上千个之多.他们没有什么正当职业 ...

  8. JAVA通过HTTP方式获取数据

    测试获取免费天气数据接口:http://www.weather.com.cn/data/sk/101190408.html URL数据如下图: 代码部分: package https; import ...

  9. Egret白鹭开发微信小游戏分享功能

    今天给大家分享一下微信分享转发功能,话不多说,直接干 方法一: 1.在egret中打开Platfrom.ts文件,添加代码如下(当然,你也可以直接复制粘贴) /** * 平台数据接口. * 由于每款游 ...

  10. Python 内存分配时的小秘密

    Python 中的sys 模块极为基础而重要,它主要提供了一些给解释器使用(或由它维护)的变量,以及一些与解释器强交互的函数. 本文将会频繁地使用该模块的getsizeof() 方法,因此,我先简要介 ...