Perbezaan antara tiga kaedah penyimpanan data JavaScript

Bab ini memperkenalkanperbezaan antara tiga kaedah penyimpanan data javaScript Ia mempunyai nilai rujukan tertentu, saya harap ia dapat membantu anda.

Titik biasa antara sessionStorage, localStorage dan kuki:

semuanya disimpan di sebelah penyemak imbas dan mempunyai asal yang sama .

Perbezaan antara sessionStorage, localStorage dan kuki:

Data kuki sentiasa dibawa dalam permintaan http dari asal yang sama (walaupun ia tidak diperlukan), yang ialah, kuki disimpan dalam penyemak imbas Dipindahkan berulang-alik ke pelayan. SessionStorage dan localStorage tidak menghantar data secara automatik ke pelayan, tetapi hanya menyimpannya secara setempat. Data kuki juga mempunyai konsep laluan, yang boleh menyekat kuki untuk hanya tergolong dalam laluan tertentu.

Had saiz storan juga berbeza Data kuki tidak boleh melebihi 4k Pada masa yang sama, kerana setiap permintaan http membawa kuki, kuki hanya sesuai untuk menyimpan data yang sangat kecil, seperti pengecam sesi. Walaupun sessionStorage dan localStorage juga mempunyai had saiz storan, ia lebih besar daripada kuki dan boleh mencapai 5M atau lebih.

Tempoh kesahihan data adalah berbeza Penyimpanan: ia hanya sah sehingga tetingkap penyemak imbas semasa ditutup, dan secara semula jadi ia tidak boleh diteruskan: ia sentiasa sah dan disimpan walaupun semasa tetingkap atau penyemak imbas ditutup, jadi ia digunakan sebagai data berterusan; Kuki hanya sah sehingga masa tamat tempoh kuki yang ditetapkan, walaupun tetingkap atau penyemak imbas ditutup.

Skop yang berbeza, sessionStorage tidak dikongsi dalam tetingkap penyemak imbas yang berbeza, malah pada halaman yang sama dikongsi dalam semua tetingkap asal yang sama juga dikongsi dalam semua tetingkap asal yang sama;

Storan Web menyokong mekanisme pemberitahuan acara, yang boleh menghantar pemberitahuan kemas kini data kepada pendengar.

Antara muka api Storan Web lebih mudah digunakan.

Kaedah localStorage terkapsul boleh mengawal bilangan data yang disimpan dan masa

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
  };
});

Kaedah penggunaan

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

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