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

原创
06/03 11:44
阅读数 2K

现象

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()
}
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部