当前位置: 首页 > 新闻动态 > 软件编程

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

作者:用户投稿 浏览: 发布日期:2026-01-11
[导读]:这篇文章主要介绍了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程序设计有所帮助。

    免责声明:转载请注明出处:http://sczxchw.cn/news/519082.html

    扫一扫高效沟通

    多一份参考总有益处

    免费领取网站策划SEO优化策划方案

    请填写下方表单,我们会尽快与您联系
    感谢您的咨询,我们会尽快给您回复!