网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 总结JavaScript三种数据存储方式之间的区别
内容
    这篇文章主要介绍了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')
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/14 19:16:55