Chrome無痕模式下無法使用localStorage和sessionStorage的兼容方案

現象

Chrome無痕模式下無法使用localStorage和sessionStorage，讀取windown下的localStorage和sessionStorage成員時報錯。

兼容性

PC端Firefox、Android端Chrome、iOS端Safari沒有這個限制。

解決

因爲“無痕模式”的本意就是不需要長期存儲數據，那麼把數據存儲在內容中是可以接受的，所以可以通過監聽異常並創建一個僞存儲類來兼容這個問題。

/**
 * @name 內存存儲
 */
class MemoryStorage {
  /**
   * @name 構造方法
   */
  constructor() {
    this.data = {}
  }
  /**
   * @name 保存
   * @param name 鍵名
   * @param value 鍵值
   */
  set(name, value) {
    this.data[name] = value
  }
  /**
   * @name 讀取
   * @param name 鍵名
   */
  get(name) {
    return this.data[name]
  }
  /**
   * @name 刪除
   * @param name 鍵名
   */
  remove(name) {
    delete this.data[name]
  }
  /**
   * @name 判斷是否包含
   * @param name 鍵名
   */
  contains(name) {
    return name in this.data
  }
  /**
   * @name 清空
   */
  clear() {
    this.storage.clear()
  }
}

let localStorage, sessionStorage
try {
  localStorage = window.localStorage
  sessionStorage = window.sessionStorage
} catch {
  localStorage = new MemoryStorage() // 不支持localStorage時回退到內存存儲
  sessionStorage = new MemoryStorage()
}