JavaScript의 세 가지 데이터 저장 방법의 차이점

이 장에서는자바스크립트의 세 가지 데이터 저장 방법에 대해 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

sessionStorage, localStorage 및 쿠키의 공통점:

은 모두 브라우저 측에 저장되며 출처가 동일합니다.

sessionStorage, localStorage 및 쿠키의 차이점:

쿠키 데이터는 항상 동일한 출처의 http 요청에 전달됩니다(필요하지 않더라도). 즉, 쿠키는 브라우저에 저장되고 서버와 앞뒤로 전송됩니다. SessionStorage와 localStorage는 데이터를 자동으로 서버에 보내지 않고 로컬에만 저장합니다. 쿠키 데이터에는 쿠키가 특정 경로에만 속하도록 제한할 수 있는 경로 개념도 있습니다.

저장 크기 제한도 다릅니다. 동시에, 각 http 요청은 쿠키를 전달하므로 쿠키는 세션 식별자와 같은 매우 작은 데이터를 저장하는 데만 적합합니다. sessionStorage와 localStorage에도 저장 크기 제한이 있지만 쿠키보다 훨씬 크고 5M 이상에 도달할 수 있습니다.

데이터 유효기간이 다릅니다. sessionStorage: 현재 브라우저 창이 닫힐 때까지만 유효하며 당연히 지속될 수 없습니다. localStorage: 창이나 브라우저가 닫힐 때에도 항상 유효하며 저장됩니다. 닫혀 있으므로 영구 데이터로 사용됩니다. 창이나 브라우저가 닫혀 있어도 쿠키는 설정된 쿠키 만료 시간까지만 유효합니다.

다른 범위, 동일한 페이지에서도 sessionStorage는 다른 브라우저 창에서 공유되지 않습니다. localStorage는 모든 동일한 출처 창에서 공유됩니다.

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 + &#39;:&#39; + url;
        var lruKey = this.getLRU();
        //淘汰最近最少使用的这个。
        //另外起一个方法读取最符合淘汰的这个
        //前提是当前这个key，不在localStorage里面。
        if (lruKey) {
          this.localStorage.removeItem(lruKey);
        }
        //开始设置一下这个值
        //为了兼容性，用以下方法设置
        if (typeof this.memQueue.objs != &#39;undefined&#39; &&
          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(&#39;LRUConfig&#39;, JSON.stringify(this.memQueue));
      }
    },
    /*
     * 近期最少使用算法
     */
    LRU: function(key) {
      var memQueue = this.memQueue;
      if (typeof memQueue.objs != &#39;undefined&#39;) {
        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 = {
            &#39;key&#39;: key,
            &#39;times&#39;: 0,
            &#39;time&#39;: (new Date()).getTime(),
            &#39;life&#39;: (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 = {
          &#39;key&#39;: key,
          &#39;times&#39;: 0,
          &#39;time&#39;: (new Date()).getTime(),
          &#39;life&#39;: (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 {
    &#39;cache&#39;: Cache
  };
});

사용 방법

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

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