现象
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()
}