这篇文章主要介绍了JavaScript三种数据存储方式之间的区别,指的分别是sessionStorage和localStorage以及cookie三种浏览器端的数据存储方式,需要的朋友可以参考下

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