關於H5本部緩存localStorage，sessionStorage

HTML5 提供了兩種在客戶端存儲數據的新方法：

• localStorage - 沒有時間限制的數據存儲   一直存在除非用戶手動清除緩存;是基於域的，任何該域下的全部頁面均可訪問localStorage
• sessionStorage - 針對一個 session 的數據存儲  瀏覽器關閉時清除

以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

使用方法：

localStorage.setItem("menuTitle", arrDisplay);

sessionStorage.getItem('key_null')

sessionStorage.removeItem('page')

localStorage.clear()

監聽本地存儲發生變化的函數
window.addEventListener("storage",function(e){本地存儲發生變化時執行的函數XXXXXX},true);

在作項目的過程當中遇到少有的safari瀏覽器 H5本地存儲不支持的狀況，剛開始覺得是手機型號和IOS版本的關係，通過對比排查發現是手機開啓了無痕瀏覽的緣由致使的，查了一下總結以下：

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

• localStorage對象仍然存在
• 可是setItem會報異常：QuotaExceededError
• getItem和removeItem直接忽略

Safari中控制檯截圖

 

判斷瀏覽器是否無痕瀏覽模式

if (typeof localStorage === 'object') { try { localStorage.setItem('localStorage', 1); localStorage.removeItem('localStorage'); return true; } catch (e) { //Storage.prototype._setItem = Storage.prototype.setItem; //Storage.prototype.setItem = function() {}; alert('不支持本地存儲'); return false; } }