HTML5 로컬 저장소 Localstorage 코드 세부정보

로컬 스토리지란 무엇입니까

며칠 전, 이전 프로젝트에서 쿠키에 이상한 작업이 있다는 것을 발견했습니다. 상담 후 일부 정보를 전달하지 않기 위해 캐시하고 싶었습니다. URL에 매개변수가 있지만 쿠키로 인해 발생할 수 있는 문제는 고려하지 않았습니다.

① cookie大小限制在4k左右，不适合存业务数据
② cookie每次随HTTP事务一起发送，浪费带宽

우리는 모바일 프로젝트를 진행하고 있으므로 정말 적합한 기술입니다. 여기서 사용하는 것은 localstorage, localstorage 입니다. 쿠키의 최적화라고 합니다. 클라이언트 측에서 데이터를 편리하게 저장하는 데 사용할 수 있고 HTTP로 전송되지는 않지만 문제가 없는 것은 아닙니다.

① localstorage大小限制在500万字符左右，各个浏览器不一致
② localstorage在隐私模式下不可读取
③ localstorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）
④ localstorage不能被爬虫爬取，不要用它完全取代URL传参

위의 문제는 피할 수 있으므로 로컬 스토리지를 어떻게 사용하는지, 올바르게 사용하는 방법에 중점을 두어야 합니다.

localstorage 사용

기본지식

Localstorage 저장소 객체는 두 가지 유형으로 나누어집니다.

① sessionStrage: 세션은 세션을 의미하고, 여기서는 세션을 의미합니다. 사용자가 웹사이트를 탐색할 때 세션 개체의 유효 기간은 웹사이트에 입장한 후부터 웹사이트를 닫는 순간까지만 유효합니다.

② localStorage: 데이터가 무엇이든 클라이언트 하드웨어 장치에 데이터를 저장합니다. 즉, 다음에 컴퓨터를 켤 때 데이터가 그대로 유지됩니다.

둘의 차이점은 하나는 임시 보관용이고 다른 하나는 장기 보관용이라는 점입니다.

기본 사용법을 설명하는 간단한 코드는 다음과 같습니다.

<p id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
  height: 100px;">
</p>
<input type="text" id="text" />
<select id="type">
  <option value="session">sessionStorage</option>
  <option value="local">localStorage</option>
</select>
<button onclick="save();">
  保存数据</button>
<button onclick="load();">
  读取数据</button>
<script type="text/javascript">
  var msg = document.getElementById(&#39;msg&#39;),
            text = document.getElementById(&#39;text&#39;),
            type = document.getElementById(&#39;type&#39;);

  function save() {
    var str = text.value;
    var t = type.value;
    if (t == &#39;session&#39;) {
      sessionStorage.setItem(&#39;msg&#39;, str);
    } else {
      localStorage.setItem(&#39;msg&#39;, str);
    }
  }

  function load() {
    var t = type.value;
    if (t == &#39;session&#39;) {
      msg.innerHTML = sessionStorage.getItem(&#39;msg&#39;);
    } else {
      msg.innerHTML = localStorage.getItem(&#39;msg&#39;);
    }
  }
</script>

실제 시나리오

실제 작업에서 localstorage를 사용하려면 일반적으로 다음 요구 사항이 필요합니다.

① 검색 페이지의 출발 도시, 도착 도시, 비실시간 위치 정보 등 일반 정보를 캐시합니다.

② 캐시 도시 목록 데이터는 상대적으로 용량이 큰 경우가 많습니다

③ 캐시된 각 정보는 추적 가능해야 합니다. 예를 들어 서버는 도시 데이터 업데이트를 통지합니다. 이때 만료 시간은 최근 방문 시 자동으로 설정되어야 합니다.

④ 각 정보에는 만료 시간이 있습니다. 날짜 상태이며

⑤...

define([], function () {

  var Storage = _.inherit({
    //默认属性
    propertys: function () {

      //代理对象，默认为localstorage
      this.sProxy = window.localStorage;

      //60 * 60 * 24 * 30 * 1000 ms ==30天
      this.defaultLifeTime = 2592000000;

      //本地缓存用以存放所有localstorage键值与过期日期的映射
      this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';

      //当缓存容量已满，每次删除的缓存数
      this.removeNum = 5;

    },

    assert: function () {
      if (this.sProxy === null) {
        throw 'not override sProxy property';
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.assert();
    },

    /*
    新增localstorage
    数据格式包括唯一键值，json字符串，过期日期，存入日期
    sign 为格式化后的请求参数，用于同一请求不同参数时候返回新数据，比如列表为北京的城市，后切换为上海，会判断tag不同而更新缓存数据，tag相当于签名
    每一键值只会缓存一条信息
    */
    set: function (key, value, timeout, sign) {
      var _d = new Date();
      //存入日期
      var indate = _d.getTime();

      //最终保存的数据
      var entity = null;

      if (!timeout) {
        _d.setTime(_d.getTime() + this.defaultLifeTime);
        timeout = _d.getTime();
      }

      //
      this.setKeyCache(key, timeout);
      entity = this.buildStorageObj(value, indate, timeout, sign);

      try {
        this.sProxy.setItem(key, JSON.stringify(entity));
        return true;
      } catch (e) {
        //localstorage写满时,全清掉
        if (e.name == 'QuotaExceededError') {
          //            this.sProxy.clear();
          //localstorage写满时，选择离过期时间最近的数据删除，这样也会有些影响，但是感觉比全清除好些，如果缓存过多，此过程比较耗时，100ms以内
          if (!this.removeLastCache()) throw '本次数据存储量过大';
          this.set(key, value, timeout, sign);
        }
        console && console.log(e);
      }
      return false;
    },

    //删除过期缓存
    removeOverdueCache: function () {
      var tmpObj = null, i, len;

      var now = new Date().getTime();
      //取出键值对
      var cacheStr = this.sProxy.getItem(this.keyCache);
      var cacheMap = [];
      var newMap = [];
      if (!cacheStr) {
        return;
      }

      cacheMap = JSON.parse(cacheStr);

      for (i = 0, len = cacheMap.length; i < len; i++) {
        tmpObj = cacheMap[i];
        if (tmpObj.timeout < now) {
          this.sProxy.removeItem(tmpObj.key);
        } else {
          newMap.push(tmpObj);
        }
      }
      this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));

    },

    removeLastCache: function () {
      var i, len;
      var num = this.removeNum || 5;

      //取出键值对
      var cacheStr = this.sProxy.getItem(this.keyCache);
      var cacheMap = [];
      var delMap = [];

      //说明本次存储过大
      if (!cacheStr) return false;

      cacheMap.sort(function (a, b) {
        return a.timeout - b.timeout;
      });

      //删除了哪些数据
      delMap = cacheMap.splice(0, num);
      for (i = 0, len = delMap.length; i < len; i++) {
        this.sProxy.removeItem(delMap[i].key);
      }

      this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
      return true;
    },

    setKeyCache: function (key, timeout) {
      if (!key || !timeout || timeout < new Date().getTime()) return;
      var i, len, tmpObj;

      //获取当前已经缓存的键值字符串
      var oldstr = this.sProxy.getItem(this.keyCache);
      var oldMap = [];
      //当前key是否已经存在
      var flag = false;
      var obj = {};
      obj.key = key;
      obj.timeout = timeout;

      if (oldstr) {
        oldMap = JSON.parse(oldstr);
        if (!_.isArray(oldMap)) oldMap = [];
      }

      for (i = 0, len = oldMap.length; i < len; i++) {
        tmpObj = oldMap[i];
        if (tmpObj.key == key) {
          oldMap[i] = obj;
          flag = true;
          break;
        }
      }
      if (!flag) oldMap.push(obj);
      //最后将新数组放到缓存中
      this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));

    },

    buildStorageObj: function (value, indate, timeout, sign) {
      var obj = {
        value: value,
        timeout: timeout,
        sign: sign,
        indate: indate
      };
      return obj;
    },

    get: function (key, sign) {
      var result, now = new Date().getTime();
      try {
        result = this.sProxy.getItem(key);
        if (!result) return null;
        result = JSON.parse(result);

        //数据过期
        if (result.timeout < now) return null;

        //需要验证签名
        if (sign) {
          if (sign === result.sign)
            return result.value;
          return null;
        } else {
          return result.value;
        }

      } catch (e) {
        console && console.log(e);
      }
      return null;
    },

    //获取签名
    getSign: function (key) {
      var result, sign = null;
      try {
        result = this.sProxy.getItem(key);
        if (result) {
          result = JSON.parse(result);
          sign = result && result.sign
        }
      } catch (e) {
        console && console.log(e);
      }
      return sign;
    },

    remove: function (key) {
      return this.sProxy.removeItem(key);
    },

    clear: function () {
      this.sProxy.clear();
    }
  });

  Storage.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Storage;

});

이 코드에는 localstorage의 기본 작업이 포함되어 있으며 위의 문제를 처리합니다. 하지만 실제 사용은 더 추상적이어야 합니다.

define(['AbstractStorage'], function (AbstractStorage) {

  var Store = _.inherit({
    //默认属性
    propertys: function () {

      //每个对象一定要具有存储键，并且不能重复
      this.key = null;

      //默认一条数据的生命周期，S为秒，M为分，D为天
      this.lifeTime = '30M';

      //默认返回数据
      //      this.defaultData = null;

      //代理对象，localstorage对象
      this.sProxy = new AbstractStorage();

    },

    setOption: function (options) {
      _.extend(this, options);
    },

    assert: function () {
      if (this.key === null) {
        throw 'not override key property';
      }
      if (this.sProxy === null) {
        throw 'not override sProxy property';
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.setOption(opts);
      this.assert();
    },

    _getLifeTime: function () {
      var timeout = 0;
      var str = this.lifeTime;
      var unit = str.charAt(str.length - 1);
      var num = str.substring(0, str.length - 1);
      var Map = {
        D: 86400,
        H: 3600,
        M: 60,
        S: 1
      };
      if (typeof unit == 'string') {
        unit = unit.toUpperCase();
      }
      timeout = num;
      if (unit) timeout = Map[unit];

      //单位为毫秒
      return num * timeout * 1000 ;
    },

    //缓存数据
    set: function (value, sign) {
      //获取过期时间
      var timeout = new Date();
      timeout.setTime(timeout.getTime() + this._getLifeTime());
      this.sProxy.set(this.key, value, timeout.getTime(), sign);
    },

    //设置单个属性
    setAttr: function (name, value, sign) {
      var key, obj;
      if (_.isObject(name)) {
        for (key in name) {
          if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);
        }
        return;
      }

      if (!sign) sign = this.getSign();

      //获取当前对象
      obj = this.get(sign) || {};
      if (!obj) return;
      obj[name] = value;
      this.set(obj, sign);

    },

    getSign: function () {
      return this.sProxy.getSign(this.key);
    },

    remove: function () {
      this.sProxy.remove(this.key);
    },

    removeAttr: function (attrName) {
      var obj = this.get() || {};
      if (obj[attrName]) {
        delete obj[attrName];
      }
      this.set(obj);
    },

    get: function (sign) {
      var result = [], isEmpty = true, a;
      var obj = this.sProxy.get(this.key, sign);
      var type = typeof obj;
      var o = { 'string': true, 'number': true, 'boolean': true };
      if (o[type]) return obj;

      if (_.isArray(obj)) {
        for (var i = 0, len = obj.length; i < len; i++) {
          result[i] = obj[i];
        }
      } else if (_.isObject(obj)) {
        result = obj;
      }

      for (a in result) {
        isEmpty = false;
        break;
      }
      return !isEmpty ? result : null;
    },

    getAttr: function (attrName, tag) {
      var obj = this.get(tag);
      var attrVal = null;
      if (obj) {
        attrVal = obj[attrName];
      }
      return attrVal;
    }

  });

  Store.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Store;
});

실제로 사용하는 경우 저장소 클래스는 로컬 저장소를 작동하는 데 사용됩니다. 코드는 간단한 테스트로 끝납니다.

저장이 완료되어 앞으로는 요청이 없을 예정이라 오늘 코드는 기본적으로 끝났습니다. 드디어 안드로이드 하이브리드에 뒤로가기 버튼이 생겼네요. 누르면 이전 페이지로 돌아갑니다. 이때 내부 로컬 저장소를 읽지 못할 수 있습니다! 간단하고 신뢰할 수 없는 해결책은 webapp에

window.onunload = function () { };//适合单页应用，不要问我为什么，我也不知道

결론

localstorage를 추가하는 것입니다. 모바일 개발에 필수적인 기술적 포인트이며, 구체적인 비즈니스 코드는 나중에 git에 올릴 예정입니다.

위 내용은 HTML5 로컬 저장소 Localstorage 코드 세부정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!