JavaScript实现基于Cookie的存储类实例

 更新时间:2015年04月10日 08:59:04   作者:liuli  
这篇文章主要介绍了JavaScript实现基于Cookie的存储类,实例分析了javascript通过cookie实现数据存储的技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了JavaScript实现基于Cookie的存储类。分享给大家供大家参考。具体分析如下:

通过这个JS类,你可以象使用session一样使用cookie,非常简单了!

/*
 * CookieStorage.js
 * 本类实现像localStorage和sessionStorage一样的存储API
 * 不同的是,它是基于HTTP Cookies实现的.
 */
function CookieStorage(maxage, path) {
// 两个参数分别代表储存有效期和作用域
 // 获取一个储存全部cookies的对象
 var cookies = (function() {
 // 类型之前介绍的getCookies函数
  var cookies = {};
  // 该对象最终会返回
  var all = document.cookie;
  // 以大字符串的形式获取所有cookies的信息
  if (all === "")
  // 如果该属性为空白符
   return cookies;
   // 返回一个空对象
  var list = all.split("; ");
  // 分离出名/值对
  for(var i = 0; i < list.length; i++) {
  // 遍历每个cookie
   var cookie = list[i];
   var p = cookie.indexOf("=");
   // 找到第一个“=”符号
   var name = cookie.substring(0,p);
   // 获取cookie的名字
   var value = cookie.substring(p+1);
   // 获取cookie对应的值
   value = decodeURIComponent(value);
   // 对其值进行解码
   cookies[name] = value;
   // 将名值对存储到对象中
  }
  return cookies;
 }());
 // 将所有cookie的名字存储到一个数组中
 var keys = [];
 for(var key in cookies) keys.push(key);
 // 现在定义储存API公共的属性和方法
 // 储存的cookies的个数
 this.length = keys.length;
 // 返回第n个cookie的名字,如果n越界则返回null
 this.key = function(n) {
  if (n < 0 || n >= keys.length) return null;
  return keys[n];
 };
 // 返回指定名字的cookie值,如果不存在则返回null
 this.getItem = function(name){
 return cookies[name] || null;
 };
 // 储存cookie值
 this.setItem = function(key, value) {
  if (!(key in cookies)) {
  // 如果要促成的cookie还不存在
   keys.push(key);
   // 将指定的名字加入到储存所有cookie名的数组中
   this.length++;
   // cookies个数加一
  }
  // 将该名/值对数据存储到cookie对象中.
  cookies[key] = value;
  // 开始正式设置cookie.
  // 首先将要储存的cookie的值进行编码
  // 同时创建一个“名称=编码后的值”形式的字符串
  var cookie = key + "=" + encodeURIComponent(value);
  // 将cookie的属性也加入到该字符串中
  if (maxage) cookie += "; max-age=" + maxage;
  if (path) cookie += "; path=" + path;
  // 通过document.cookie属性来设置cookie
  document.cookie = cookie;
 };
 // 删除指定的cookie
 this.removeItem = function(key) {
  if (!(key in cookies)) return;
  // 如果cookie不存在,则什么也不做
  // 从内部维护的cookies组删除指定的cookie
  delete cookies[key];
  // 同时将cookie中的名字也在内部的数组中删除.
  // 如果使用ES5定义的数组indexOf()方法会更加简单.
  for(var i = 0; i < keys.length; i++) {
  // 遍历所有的名字
   if (keys[i] === key) { 
   // 当我们找到了要找的那个
    keys.splice(i,1); 
 // 将它从数组中删除.
    break;
   }
  }
  this.length--; 
  // cookies个数减一
  // 最终通过将该cookie的值设置为空字符串
  //以及将有效期设置为0来删除指定的cookie.
  document.cookie = key + "=; max-age=0";
 };
 // 删除所有的cookies
 this.clear = function() {
  // 循环所有的cookies的名字,并将cookies删除
  for(var i = 0; i < keys.length; i++)
   document.cookie = keys[i] + "=; max-age=0";
  // 重置所有的内部状态
  cookies = {};
  keys = [];
  this.length = 0;
 };
}

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • 整理Javascript基础语法学习笔记

    整理Javascript基础语法学习笔记

    整理Javascript基础语法学习笔记,之前一系列的文章是跟我学习Javascript,本文就是进一步学习javascript基础语法,希望大家继续关注
    2015-11-11
  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    常用的页面效果有弹出层效果,无缝滚动效果,选项卡切换效果,接下来与大家分享一款自己用原生javascript写的选项卡切换效果,感兴趣的朋友可以参考下哈
    2013-03-03
  • JS判断字符串变量是否含有某个字串的实现方法

    JS判断字符串变量是否含有某个字串的实现方法

    下面小编就为大家带来一篇JS判断字符串变量是否含有某个字串的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js 页面元素的几个用法总结

    js 页面元素的几个用法总结

    本文是对js中页面元素的几个用法进行了详细的总结介绍,需要的朋友可以 过来参考下,希望对大家有所帮助
    2013-11-11
  • jsTree树控件(基于jQuery, 超强悍)[推荐]

    jsTree树控件(基于jQuery, 超强悍)[推荐]

    jsTree是基于javascript的一个跨浏览器树控件,功能强大,而且是免费的。
    2009-09-09
  • JS区分浏览器页面是刷新还是关闭

    JS区分浏览器页面是刷新还是关闭

    在web开发中我们经常各种各样的需求。今天小编给大家介绍JS区分浏览器页面是刷新还是关闭标签页,非常实用,感兴趣的童鞋参考下吧
    2016-04-04
  • javascript获取flash版本号的方法

    javascript获取flash版本号的方法

    这篇文章主要介绍了javascript获取flash版本号的方法,以实例形式分析了javascript判断用户是否安装了Flash及获取Flash版本号的方法,具有一定的实用价值,需要的朋友可以参考下
    2014-11-11
  • JS实现购物车特效

    JS实现购物车特效

    本文主要分享了用JavaScript实现购物车特效的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 简单谈谈JS数组中的indexOf方法

    简单谈谈JS数组中的indexOf方法

    最近在工作中遇到一个小问题,这篇文章代码我会简化成小例子展示给大家。给大家详细的介绍JS数组中的indexOf方法,用心看到最后会有收获哈,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • JSON创建键值对(key是中文或者数字)方式详解

    JSON创建键值对(key是中文或者数字)方式详解

    这篇文章主要介绍了JSON创建键值对(key是中文或者数字)方式详解,需要的朋友可以参考下
    2017-08-08

最新评论