总结JavaScript三种数据存储方式之间的区别

sessionStorage 、localStorage 和 cookie 之间的共同点：

都是保存在浏览器端，且同源的。

sessionStorage 、localStorage 和 cookie 之间的区别：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。 Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。 Web Storage 的 api 接口使用更方便。

封装的localStorage的方法，可以控制存储数据的条数，以及时间

function support() {
var _t = !(typeof window.localStorage === 'undefined');
return _t;
}

$.extend(Cache,{
config: {
size: 5,// lifeTime: 86400 //一天的秒数
lifeTime: 1*60
},localStorage: window.localStorage,memQueue: (function () {
if (support()) {
var jsonStr = window.localStorage.getItem('LRUConfig');
return jsonStr ? JSON.parse(jsonStr) : {
keys: {},objs: []
};
} else {
return {};
}
})(),get: function(appid,url) {
if (true == support()) {
var key = appid + ':' + url;
//开始做LRU算法。
this.LRU(key);
//LRU算法结束。
var isFresh = true;
var nowTime = (new Date()).getTime() / 1000;
if(key in this.memQueue.keys){
var cacheTime = this.memQueue.keys[key].life / 1000;
//如果过期时间超过 配置的lifeTime，
//则清除掉当前缓存
if(nowTime - cacheTime >= this.config.lifeTime){
delete this.memQueue.keys[key];
for (var i=0,len = this.memQueue.objs.length; i < len; i++) {
var _o = this.memQueue.objs[i];
if(_o.key == key){
this.memQueue.objs.splice(i,1);
break;
}
}
isFresh = false;
}
}
//如果isFresh为假，就是已过期，则返回null，否则从localStorage中取
return (false == isFresh) ? null : this.localStorage[key];
}
},set: function(appid,url,value) {
if (true == support()) {
var key = appid + ':' + url;
var lruKey = this.getLRU();
//淘汰最近最少使用的这个。
//另外起一个方法读取最符合淘汰的这个
//前提是当前这个key，不在localStorage里面。
if (lruKey) {
this.localStorage.removeItem(lruKey);
}
//开始设置一下这个值
//为了兼容性，用以下方法设置
if (typeof this.memQueue.objs != 'undefined' &&
this.memQueue.objs.length <= this.config.size) {
this.localStorage.removeItem(key);

    } else {
      while (this.memQueue.objs.length >= this.con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>.size) {
        var lruKey = this.getLRU();
        //淘汰最近最少使用的这个。
        //另外起<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>读取最符合淘汰的这个
        if (lruKey) {
          this.localStorage.removeItem(lruKey);
          delete this.memQueue.keys[lruKey];
          for (var i = 0; i < this.memQueue.objs.length; i++) {
            var _o = this.memQueue.objs[i];
            if(_o.key == lruKey){
              this.memQueue.objs.splice(i,1);
              break;
            }
          }
        }
      }
    }

    this.localStorage[key] = value;
    //当前的key，也必须lru一下
    this.LRU(key);
    //lru结束

    this.localStorage.setItem('LRUCon<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>',JSON.stringify(this.memQueue));
  }
},/*
 * 近期最少使用算法
 */
LRU: function(key) {
  var memQueue = this.memQueue;
  if (typeof memQueue.objs != 'undefined') {
    var _o = memQueue.objs;

    //开始计算那个要淘汰的key，
    //就是那个times最大的，如果times最大的有几个
    //则返回那个time最小的
    var isIn = false;
    for (var i = 0,len = _o.length; i < len; i++) {
      _o[i].times = (key == _o[i].key) ? 0 : _o[i].times + 1;
      _o[i].time = (key == _o[i].key) ? (new Date()).getTime() : _o[i].time;
      if(key == _o[i].key && false == isIn){
        isIn = true;
      }
    }
    // 如果
    if(false == isIn){
      var _to = {
        'key': key,'times': 0,'time': (new Date()).getTime(),'life': (new Date()).getTime()
      };
      this.memQueue.keys[key] = _to;
      this.memQueue.objs.push(_to);
    }
    _o<a href="https://www.jb51.cc/tag/so/" target="_blank" class="keywords">.so</a>rt(function(f,s) {
      //按times降序排列。
      if (f.times < s.times) {
        return 1;
      } else if (f.times > s.times) {
        return -1;
      } else {
        //开始比较time
        //按time，时间升序排列
        if (f.time < s.time) {
          return -1;
        } else {
          return 1;
        }
      }
    });
  } else {
    this.memQueue.objs = [];
    this.memQueue.keys = {};
    var _to = {
      'key': key,'life': (new Date()).getTime()
    };
    this.memQueue.keys[key] = _to;
    this.memQueue.objs.push(_to);
    return null;
  }
},/*
 * 读取需要淘汰的一项
 */
getLRU: function() {
  var _o = this.memQueue.objs;
  if (_o) {
    return (_o.length >= this.con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>.size) ? _o.shift().key : null;
  }

  return null;

}

});

return {
'cache': Cache
};
});

使用方法

rush:js;"> var cache = require('cache'); // set 值 cache.Cache.set('ip','你自己的一个url',value);

// get值
cache.Cache.get('ip')