总结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.config.size) {
        var lruKey = this.getLRU();
        //淘汰最近最少使用的这个。
        //另外起一个<a href="https://www.f2er.com/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('LRUConfig',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.sort(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.config.size) ? _o.shift().key : null;
  }

  return null;

}

});

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

使用方法

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

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...