vue 自封装store、storage全局存储方法

  • Post author:
  • Post category:vue


首先新建一个js文件:

import typeJudge from "./typeJudge";

function Storage() {
  const STORAGE_EXPRESS = 100;
  const STORAGE_NULL = 101;
   /*
    setexpirationTime  { Function } 设置数据存储日期 内部方法,外部无法调用
    @param
      data              Any      需要存储的数据
      expirationTime    Number   存储的时间(天)     
    @return 
      storageData       设置完存储时间的组装数据
  */
  var setexpirationTime = (data, expirationTime) => {
    let currentTime = Date.parse(new Date());
    let storageData = {
      expirationTime: currentTime + 86400000 * expirationTime,
      value: data
    };
    return storageData;
  };
  
  
   /*
    setStorage  { Function }      存储行为函数
    @param
      key              String     存储的数据的key
      value            Number     存储数据的value   
      expirationTime?  Number     数据有效期 默认为1天
    @return 
      无
  */
  this.setStorage = (key, value, expirationTime = 1) => {
    let nValue = value;
    if(!key){
      throw "Key is notdefined";
    }
    if (!typeJudge.isNumber(expirationTime)) {
      throw "The expiration time must be a number ";
    }
    nValue = typeJudge.objectToJson(setexpirationTime(nValue, expirationTime));
    localStorage.setItem(key, nValue);
  };


   /*
    getStorage  { Function }     获取存储数据行为函数
    @param
      key              String    存储的数据的key
      naviteData ?     Number    是否获取带有过期时间戳的元数据,如果此参数为否则直接返回存储的数据   
    @return 
      无
  */

  this.getStorage = (key,naviteData = false) => {
    if (!key) {
      console.log("key is notdefined");
      return "";
    }
    if (localStorage.getItem(key)) {
      if(!naviteData){
        let { expirationTime, value } = JSON.parse(localStorage.getItem(key));
        if (expirationTime > Date.parse(new Date())) {
            console.log('数据未过期');
          if (value != undefined) {
            return value;
          }
        } else {
          return { $s_code_$exp: STORAGE_EXPRESS, message: "数据已过期" };
        }
      }else{
        return JSON.parse(localStorage.getItem(key));
      }
    } else {
      return { $s_code_$exp: STORAGE_NULL, message: "数据不存在" };
    }
  };

  /*
    deleteStorage  { Function }  删除指定数据
    @param
      key              String    存储的数据的key 
    @return 
      无
  */
  this.deleteStorage = (key) => {
    localStorage.removeItem(key);
  };
}




function Store() {
  this.init = () => {
  };
  this.init.call(this);
  /*
    set  { Function } 设置系统变量
    @param
      key      String   要设置的变量对象名称,支持set('con.a.v', val)  多级对象设置
      value    Any      要设置的值
    @return 无
  */
  var set = (key, value) => {
    if (key.indexOf('.') > -1) {
      var enKey = key.split('.');
      var memoryKey = this[enKey[0]];
      for (let i = 1; i < enKey.length; i++) {
        if (i === enKey.length - 1) {
          memoryKey[enKey[i]] = value;
          break;
        } else {
          memoryKey[enKey[i]] = {};
          memoryKey = memoryKey[enKey[i]];
        }
      }
      return this[enKey[0]];
    }
    this[key] = value;
  };

  /*
      get { Function } 获取系统变量的值
      @param
        key      String   要获取的变量对象名称,支持get('con.a.v', val)  多级对象设置
      @return
        value     Any     匹配到的对象的值
  
    */
  var get = (key) => {
    if (key.indexOf('.') > -1) {
      var enKey = key.split('.');
      var memoryKey = this[enKey[0]];
      for (let i = 1; i < enKey.length; i++) {
        if (i === enKey.length - 1) {
          if (memoryKey[enKey[i]]) {
            return memoryKey[enKey[i]];
          } else {
            console.warn('目标对象: ' + key + ' 并不存在');
            return '';
          }
        } else {
          if (!memoryKey[enKey[i]]) {
            console.warn('目标对象: ' + key + ' 并不存在');
            return '';
          } else {
            memoryKey = memoryKey[enKey[i]];
          }
        }
      }
    }
    return this[key];
  };

  
  /*
    showAllData { Function } 查看当前保存的所有数据
    @param 无
    @return 无

  */
  var showAllData = ()=>{
    let keys = Object.keys(this);
    let dataSource = [];
    keys.forEach(key=>{
      dataSourec.push({
        key,
        value:this[value]
      })
    })
    return dataSource;
  }

  /*
    dele { Function } 从整个类中删除指定的一个对象;
    @param
      key      String   要删除的对象
    @return 无

  */
  var dele= (key) => {
    delete this[key];
  };

  return {
    set,
    get,
    dele,
    showAllData
  }

}
var store = new Store();
var storage = new Storage();
export {store,storage}

需要用到的文件import {store,storage}即可。



版权声明:本文为weixin_45479634原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。