ES6二次封装localStorage的工具类

内容概要
使用ES6语法，封装名为storageData的class，并有两个子类localData与saveData
示范在vue单文件组件导入class并使用
关键字：localstorage ES6 class封装继承多态

分析

使用本地缓存记录数据，可以通过cookie或者localStorage来存储（现在基本用loaclStorage了）。
使用sessionStorage可保存数据至本次会话结束。
localStorage只能存储字符串，需要对象字符串频繁转换，本次工具类中做了JSON与Object的互相转换，可以直接传入传出对象。
可能需要设置数据声明周期，一定时间后使数据失效，例如记住密码时长，长时间不操作需要重新登录等。
组件化与复用：这种常用的方法，我们最好写一个工具类，或者公共方法。

类的封装

storageData父类
含有4个属性，一个判断目标数据是否存在的方法

/*
* @name String    
*       the key of storage
*       
* @data Object
*       the data what you want to save
*       
* @writeTime Number
*       a timestamp of when you write
*       
* @period Number
*       a timestamp how long the data exist 
*
* */
class storageData {
  constructor(name, data, timestamp) {
    this.name = name
    this.data = data
    this.writeTime = Number (new Date())
    this.period = timestamp
  }
  static isNotExist(data) {
    return data === null || typeof(data) === 'undefined'
  }
}

localData子类
继承父类属性，含一个存储方法，含两个静态方法，一个用来取数据，一个用来检查数据生命周期

export class localData extends storageData{
  constructor(name, map, timestamp) {
    super(name, map, timestamp)
  }
  save() {
    let saveData = this.data
    saveData.writeTime = this.writeTime
    saveData.period = this.period
    let dataStr = JSON.stringify(saveData)
    localStorage.setItem(this.name, dataStr)
  }
  static get(name) {
    let dataJSON = localStorage.getItem(name)
    /* End directly when the target does not exist */
    if(this.isNotExist(dataJSON)) {
      return null
    }
    let data = JSON.parse(dataJSON)
    /* When the existence period of the data is undefined, it is considered as permanent */
    if(this.isNotExist(data.period)) {
      return data
    }
    /* Release data if the data declaration period ends */
    if(this.isOutPeriod(data)) {
      localStorage.removeItem('data')
      data = null
    }
    return data
  }
  static isOutPeriod(data) {
    let readTime = Number (new Date())
    if ((readTime - data.writeTime) > data.period) {
      return true
    }
    return false
  }
}

sessionData子类略，与localData 95%一致

类的使用

script中导入子类

import {localData, sessionData} from "../../tools/storage"

let data = {
      es6: 'good',
      markdown: 'like',
      bug: 'fuck'
    }
// 存储30秒
let thinker= new localData('izeya', data, 1000 * 30)
thinker.save()
// 取数据（静态方法可以直接用类名调用）
let localTinker = localData.get('thinker')

听说爱点赞的人，bug都不会太多

最后编辑于：2019.02.22 14:48:03