移動端瀏覽器隱私模式/無痕模式使用本地存儲localStorage/sessionStorage的問題
開發H5 webapp時經常需要使用本地存儲,如localStorage和sessionStorage存儲一些數據,相比最多能存4k的cookie相比,用起來很好用。但是localStorage在iOS Safari、chrome和UC瀏覽器中的隱私模式(也叫無痕模式)下無法使用,手機Safari瀏覽器中具體表現是:
- localStorage對象仍然存在
- 但是setItem會報異常:QuotaExceededError
- getItem和removeItem直接忽略
Safari中控制台截圖
判斷瀏覽器是否支持localStorage的方法:
function isLocalStorageSupported() {
var testKey = 'test',
storage = window.sessionStorage;
try {
storage.setItem(testKey, 'testValue');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}