JavaScript中cookie工具函数封装的示例代码

 更新时间:2016年10月11日 11:50:42   作者:子匠_Zijor  
这篇文章给大家主要介绍了JavaScript中cookie工具函数的封装,文中给出了详细的实现步骤和示例代码,相信会对大家的理解很有帮助,有需要的朋友们下面来一起看看吧。

一. 语法

1.1 获取当前页面的所有cookie:

var allCookies = document.cookie;

allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对)。

1.2 写一个新cookie:

document.cookie = updatedCookie;

updatedCookie是一个键值对形式的字符串。只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加。例如:

document.cookie = "fontSize=14";
document.cookie = "fontSize=16";
document.cookie = "fontColor=black";

document.cookie; // fontSize=16;fontColor=black

1.3 可选属性:

除了Cookie本身的内容,还有一些可选的属性也是可以写入的,定义cookie的设定/更新,跟着一个分号以作分隔:

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

     (1) path=path (例如 ‘/', ‘/mydir') 如果没有定义,默认为当前文档位置的路径。

     (2) domain=domain (例如 ‘example.com', ‘.example.com' (包括所有子域名), ‘subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。

     (3) max-age=max-age-in-seconds (例如一年为606024*365)

     (4) expires=date-in-GMTString-format 如果没有定义,cookie会在对话结束时过期。这个值的格式参见Date.toUTCString() 。

     (5) secure (cookie只通过https协议传输) cookie的值字符串可以用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值)。

二. cookie的接口封装:

var cookieUtil = {
  // 设置cookie
  setItem: function(name, value, days) {
    var date=new Date();
    date.setDate(date.getDate()+days);
    document.cookie=name+'='+value+';expires='+date;
  },

  // 获取cookie
  getItem: function(name) {
     var arr=document.cookie.replace(/\s/g, "").split(';');
     for(var i=0;i<arr.length;i++) {
       var tempArr=arr[i].split('=');
       if(tempArr[0]==name) {
        return decodeURIComponent(tempArr[1]);
       }
     }
     return '';
  },

  // 删除cookie
  removeItem: function(name) {
    this.setItem(name,'1', -1);
  },

  // 检查是否含有某cookie
  hasItem: function(name) {
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(name).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },

  // 获取全部的cookie列表
  getAllItems: function() {
    var cookieArr = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nIdx = 0; nIdx < cookieArr.length; nIdx++) { cookieArr[nIdx] = decodeURIComponent(cookieArr[nIdx]); }
    return cookieArr;
  }
};

总结

以上就是JavaScript中cookie工具函数封装的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • 在网页里看flash的trace数据的js类

    在网页里看flash的trace数据的js类

    我的js类jdhcn.js中的一个flashDebug方法
    2009-01-01
  • 使用JS动态构建目录树

    使用JS动态构建目录树

    本文详细讲解了使用JS动态构建目录树的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • TypeScript 中如何限制对象键名的取值范围

    TypeScript 中如何限制对象键名的取值范围

    TypeScript由微软开发的自由和开源的编程语言,是一种给 JavaScript 添加特性的语言扩展,接下来通过本文给大家介绍TypeScript 中如何限制对象键名的取值范围,感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • 使用Echart实现绘制立体的柱状图

    使用Echart实现绘制立体的柱状图

    EChart开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。本文将利用EChart绘制立体的柱状图,感兴趣的可以学习一下
    2022-03-03
  • 微信小程序中weui用法解析

    微信小程序中weui用法解析

    这篇文章主要介绍了微信小程序中weui用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Flutter 超实用简单菜单弹出框 PopupMenuButton功能

    Flutter 超实用简单菜单弹出框 PopupMenuButton功能

    这篇文章主要介绍了Flutter 超实用简单菜单弹出框 PopupMenuButton功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 微信小程序骨架屏的实现示例

    微信小程序骨架屏的实现示例

    本文主要介绍了微信小程序骨架屏的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Javascript中的数组常用方法解析

    Javascript中的数组常用方法解析

    这篇文章主要介绍了Javascript中的数组常用方法解析的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • web-view内嵌H5与uniapp数据的实时传递解决方案

    web-view内嵌H5与uniapp数据的实时传递解决方案

    这篇文章主要介绍了web-view内嵌H5与uniapp数据的实时传递,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 原生JS封装animate运动框架的实例

    原生JS封装animate运动框架的实例

    下面小编就为大家带来一篇原生JS封装animate运动框架的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论