es6實現的本地儲存程式碼例項

admin發表於2017-02-11

分享一段程式碼例項,它利用es6實現了本地儲存的程式碼封裝功能。

感興趣的朋友可以參考一下,程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
class BaseLocalStorege {
  constructor(preId, timeSign) {
    this.preId = preId
    this.timeSign = timeSign
    this.status = {
      Success: 0, //成功        
      FaiLure: 1, //失敗
      OverFlow: 2, //溢位
      TimeOut: 3 //過期
    }
    this.storage = localStorage || window.localStorage
  }
  getKey(key) {
      return this.preId + key
    }
    //新增(修改)資料
    /*
     * 引數key:資料欄位標識
     * 引數value:資料值
     * 引數callback:回撥函式
     * 引數time:新增時間
     */
  set(key, value, callback, time) {
    let status = this.status.Success
    key = this.getKey(key)
    try {
      time = new Date(time).getTime() || time.getTime();
    } catch (e) {
      //TODO handle the exception
      //為傳入時間引數或者時間引數有誤獲取預設時間:一個月
      time = new Date().getTime() + 1000 * 60 * 60 * 24 * 31;
    }
    try {
      //向資料庫中新增資料
      this.storage.setItem(key, time, +this.timeSign + value);
    } catch (e) {
      //溢位失敗,返回溢位狀態
      //TODO handle the exceptionOverFlow
      status = this.status.OverFlow;
    }
    callback && callback.call(this, status, key, value);
  }
  get(key, callback) {
    //預設操作狀態時成功
    let status = this.status.Success
    key = this.getKey(key),
      //預設值為空
      value = null,
      //時間戳與儲存資料之間的拼接符長度
      timeSignLen = this.timeSign.length,
      //快取當前物件
      that = this,
      //時間戳與儲存資料之間的拼接符起始位置
      index,
      //時間戳
      time,
      //最終獲取的資料
      result;
    try {
      //獲取欄位對應的資料字串
      value = that.storage.getItem(key);
    } catch (e) {
      //TODO handle the exception
      //獲取失敗,則返回失敗狀態,資料結果為null
      result = {
        status: that.status.FaiLure,
        value: null
      };
      callback && callback.call(this, result.status, result.value);
      return result;
    }
    //如果成功獲取資料字串
    if (value) {
      //獲取時間戳與儲存資料之間的拼接符起始位置
      index = value.indexOf(that.timeSign);
      //獲取時間戳
      time = +value.slice(0, index);
      //如果時間過期
      if (new Date(time).getTime() > new Date().getTime() || time == 0) {
        //獲取資料結果(拼接符後面的字串)
        value = value.slice(index + timeSignLen);
      } else {
        //過期則結果為null
        value = null;
        //設定狀態過期為過期狀態
        status = that.status.TimeOut;
        //刪除該欄位
        that.remove(key);
      }
    } else {
      //未獲取資料字串狀態為失敗狀態
      status = that.status.FaiLure;
    }
    //設定結果
    result = {
      status: status,
      value: value
    };
    //執行回撥函式
    callback && callback.call(this, result.status, result.value)
  }
  remove(key, callback) {
    //設定預設初始狀態為失敗
    let status = this.status.FaiLure,
      key = this.getKey(key),
      //設定預設資料結果為空
      value = null;
    try {
      //獲取欄位對應的資料
      value = this.storage.getItems(key);
    } catch (e) {
      //TODO handle the exception
      //如果資料存在
      if (value) {
        try {
          //刪除資料
          this.storage.removeItem(key);
          //設定操作成功
          status = this.status.Success;
        } catch (e) {
          //TODO handle the exception
        }
      }
      //執行回撥  注意傳入回撥函式中的資料值:如果操作狀態成功則返回真實的資料結果,否則返回空
      callback && callback.call(this, status, status > 0 ? null : value.slice(value.indexOf(this.timeSign) + this.timeSign.length))
      return callback;
    }
  }
}

相關文章