JavaScriptの3つのデータ保存方法の違い

この章では、JavaScript の 3 つのデータ保存方法の違いを紹介します。必要な方は参考にしていただければ幸いです。

sessionStorage、localStorage、Cookie の共通点:

はすべてブラウザ側に保存され、同じ起源を持ちます。

sessionStorage、localStorage、Cookie の違い:

Cookie データは、同じオリジンからの http リクエストに常に含まれます (必要でない場合でも)。つまり、Cookie はブラウザに保存され、サーバーとの間でやり取りされます。 SessionStorage と localStorage はデータをサーバーに自動的に送信せず、ローカルに保存するだけです。 Cookie データにはパスの概念もあり、Cookie が特定のパスにのみ属するように制限できます。

ストレージ サイズの制限も異なります。Cookie データは 4K を超えることはできません。同時に、各 http リクエストには Cookie が含まれるため、Cookie はセッション ID などの非常に小さなデータの保存にのみ適しています。 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 + &#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')