無痕模式下localstorage報錯解決方案

admin發表於2017-02-19
關於無痕模式這裡就不多介紹,基本就是不留下上網瀏覽的記錄,比如cookie、下載歷史和表單歷史等等。

如果搜尋頁面使用localstrorage保持使用者的最近10條搜尋記錄,當瀏覽器調節到無痕模式時候,發現搜尋頁面連熱搜詞這種介面直出的資料都沒有顯示,很明顯有程式碼錯誤了。一番除錯發現是移動端瀏覽器無痕模式不支援localstorage,pc模擬器無痕模式竟然支援本地儲存。

手機Safari瀏覽器中具體表現是:

localStorage物件仍然存在

但是setItem會報異常:QuotaExceededError

getItem和removeItem直接忽略

這也就是為什麼移動端手機程式碼報錯

於是要加一個判斷支不支援本地儲存的方法或者乾脆提示使用者關閉無痕模式。

[JavaScript] 純文字檢視 複製程式碼
// 判斷是不是無痕模式
storageTest : function(storage) {
  if(!!storage) {
    try {
      storage.setItem("key", "value");
      storage.removeItem("key");
      return true;
    } catch(e) {
      return false;
    }
  } else {
    return false;
  }
}

相關文章