這篇文章主要介紹了JavaScript三種數(shù)據(jù)存儲方式之間的區(qū)別,指的分別是sessionStorage和localStorage以及cookie三種瀏覽器端的數(shù)據(jù)存儲方式,需要的朋友可以參考下

sessionStorage 、localStorage 和 cookie 之間的共同點：

都是保存在瀏覽器端，且同源的。

sessionStorage 、localStorage 和 cookie 之間的區(qū)別：

cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。

存儲大小限制也不同，cookie數(shù)據(jù)不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

數(shù)據(jù)有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

Web Storage 支持事件通知機制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。

Web Storage 的 api 接口使用更方便。

封裝的localStorage的方法，可以控制存儲數(shù)據(jù)的條數(shù)，以及時間

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 //一天的秒數(shù)

      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')