首页 > 技术文章 > 前端打印日志到localStroge并导出

brainworld 2018-03-28 10:24 原文

interface LogEntry {
  data: any
  time: Date
}
export class PersistantLog {
  //最大条数
  maxEntries = 3000;
  isEnabled = false;
  name = "default_log";
  localStorage = window.localStorage;
  entries: LogEntry[] = JSON.parse(this.localStorage.getItem(this.name));
  constructor() {
    this.isEnabled = true;
  }
 
  public log(info: any) {
    if (!this.isEnabled) return;
    this.entries.push({
      time: new Date(),
      data: info
    })
    this.save();
  }
 
  public enable() {
    this.isEnabled = true;
  }
 
  private save() {
    this.entries = this.entries.slice(-this.maxEntries)
    let data = JSON.stringify(this.entries)
    this.localStorage.setItem(this.name, data)
  }
 
  public clear() {
    this.localStorage.removeItem(this.name);
  }
  
  private getEntries() {
    return this.entries
  }
 
  public exportLog(exportFileName: string) {
    let resultStr = this.localStorage.getItem(this.name)
    //将文本或者JS字符串信息借助Blob转换成二进制,然后,
    //作为<a>元素的href属性,配合download属性,实现下载
    if ("download" in document.createElement("a")) {
      let eleLink = document.createElement("a")
      eleLink.download = exportFileName + ".json"
      eleLink.style.display = "none"
      let blob = new Blob([resultStr])
      eleLink.href = URL.createObjectURL(blob)

      //兼容firefox,元素添加到页面才能触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      document.body.removeChild(eleLink)
    }
  }
}

推荐阅读