欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-13 17:17:42
sessionstorage 、localstorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的。 sessionstorage 、locals...

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的方法,可以控制存储数据的条数,以及时间

define(function (require) {
  var $ = require('jquery');
  var cache = {};

  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();
            //淘汰最近最少使用的这个。
            //另外起一个方法读取最符合淘汰的这个
            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,
          'times': 0,
          'time': (new date()).gettime(),
          '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
  };
});

使用方法

var cache = require('cache');
// set 值
cache.cache.set('ip', '你自己的一个url', value);

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