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

 更新时间:2020年03月12日 13:11:48   作者:willingtolove  
这篇文章主要介绍了js实现操作cookie的常见方法,结合实例形式分析了js操作cookie创建、读取、删除相关实现技巧与注意事项,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • 详解webpack进阶之loader篇

    详解webpack进阶之loader篇

    本篇文章主要介绍了详解webpack进阶之loader篇,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 基于jQuery通过jQuery.form.js插件使用ajax提交form表单

    基于jQuery通过jQuery.form.js插件使用ajax提交form表单

    在jQuery Form插件可以让你很容易的使用AJAX提交Form表单,主要方法ajaxForm和ajaxSubmit负责收集表单元素的信息,管理提交进程。这两种方法都是可配置的,让你完全控制Form提交,本篇文章介绍基于jQuery通过jQuery.form.js插件使用ajax提交form表单,需要的朋友可以参考下
    2015-08-08
  • IE的fireEvent方法概述及应用

    IE的fireEvent方法概述及应用

    IE中提供了一个fireEvent方法大概就是触发某个事件发生的意思,以为是和onclick()一样,看来是我自已为是了,有时间还要多看看javascript的细节啊,广大网友也是啊
    2013-02-02
  • nestjs返回给前端数据格式的封装实现

    nestjs返回给前端数据格式的封装实现

    这篇文章主要介绍了nestjs返回给前端数据格式的封装实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • js实现简易计算器功能

    js实现简易计算器功能

    这篇文章主要为大家详细介绍了js实现简易计算器功能,制作能进行加减乘除的计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

    浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

    今天小编就为大家分享一篇浅谈layui数据表格判断问题(加入表单元素),设置单元格样式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Javascript 关于基本类型和引用类型的个人理解

    Javascript 关于基本类型和引用类型的个人理解

    这篇文章主要介绍了Javascript 关于基本类型和引用类型的个人理解,需要的朋友可以参考下
    2019-11-11
  • js+cavans实现图片滑块验证

    js+cavans实现图片滑块验证

    这篇文章主要为大家详细介绍了js+cavans实现图片滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js 判断浏览器使用的语言示例代码

    js 判断浏览器使用的语言示例代码

    这篇文章主要介绍了使用js 判断浏览器使用的语言,需要的朋友可以参考下
    2014-03-03
  • javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

    javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

    这篇文章主要介绍了javascript运动效果,结合实例形式总结分析JavaScript实现放大缩小、滑动淡入、滚动等效果的方法,需要的朋友可以参考下
    2016-01-01

最新评论