分享一段代码实例,它利用es6实现了本地存储的代码封装功能。

感兴趣的朋友可以参考一下,代码如下:
   [ 其他 ] 运行代码    下载代码
<script>
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;
    }
  }
}
</script>

代码描述:es6 本地存储 代码实例。es6本地存储代码实例



114 151



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到