本地數據存儲解決方案以及cookie的坑

本地數據存儲解決方案以及cookie的坑

問題：

cookie過長導致頁面打開失敗

背景：

在公司的項目中有一個需求是打開多個工單即在同一個頁面中打開了多個tab（iframe），但是需要在刷新時只刷新當前頁面仍然保留著多個iframe，現在刷新有兩種方式，第一種是鍵盤中按F5或者ctrl+F5或者ctrl+R，第二種是點擊瀏覽器的左上角進行刷新，點擊F5時可以通過監聽鍵盤的F5點擊事件進行阻止預設刷新達到只刷新當前iframe，但是當用戶點擊瀏覽器的刷新後必須請求後端重新載入頁面，所以這時需要記錄下當前打開的一些iframe的信息，包括href等。

解決點擊F5只刷新本iframe：

代碼如下：

//F5鍵 F5 和 ctrl R 只刷新當前iframe
document.onkeydown = function (e){
    e = e || window.event;
    if((e.ctrlKey && e.keyCode == 82) || e.keyCode == 116) {//F5 和 ctrl R 刷新，禁止
        var cur_href= window.location.href; //獲取到當前iframe的href
        e.preventDefault();      //阻止預設刷新
        location.href=cur_href;  //刷新當前iframe
    }
}

解決點擊瀏覽器刷新（大坑）：

這時，點擊瀏覽器的刷新後必然會想服務端重新請求地址獲取信息，所以在前邊打開多個iframe的過程中必須保留打開的iframe的href以及title等信息，這時坑就來了。

解決方案一： 把打開的iframe的信息保存在後端，每打開一個iframe就向後端發請求保存iframe的信息，打開多個就進行追加

優點：

• 簡單粗暴

缺點：

• 每打開或者關閉一個iframe都得請求後端，存在效率等問題

解決方案二之cookie大坑： 不把打開的iframe信息保存在後端，保存在瀏覽器本地的cookie中

優點：

• 簡單粗暴
• 數據在本地，不會與後端交互，效率高

缺點：

• cookie是有大小限制的，每個功能變數名稱下個數有限制，重要的是每個cookie的數據大小不能超過4kb（局限性最大的點）
• cookie的有效時間設置，如果不設置失效時間就會一直保存在本地，關閉瀏覽器也會保存在硬碟中，不會自動銷毀，最終導致數量可能過多
• 安全性不高
• 每次訪問都要傳送cookie給伺服器，浪費帶寬

當時做的時候就是沒考慮到本項目中其他同事也用到了大量的cookie同時沒考慮到用戶打開大量iframe後導致該cookie值超過4kb的限制，最終導致cookie過長使得頁面打開失敗（吃一塹長一智）

解決方案三之localStorage: 把ifrmae的信息保存在localStorage中

優點：

• 簡單
• 存儲大小為5M，足夠使用
• 保存在本地，不會與後端交互

缺點：

• 保存在localStorage中的數據數永久保留在本地，關閉會話（瀏覽器tab的關閉或關閉瀏覽器不會銷毀）
• 由於需求是用戶關閉瀏覽器tab或者關閉瀏覽器之後就清除這些保存的iframe的信息，所以localStorage中的數據無法清理（原因：js無法監聽瀏覽器的關閉）

解決方案四之sessionStorage:把ifrmae的信息保存在sessionStorage中

優點：

• 簡單
• 存儲大小為5M，足夠使用
• 保存在本地，不會與後端交互
• 基於會話存在，會話關閉數據清理（正好符合了產品的需求，完美解決）

涉及到的方法：

保存localStorage：localStorage.setItem("key","value");
獲取localStorage：localStorage.getItem("key");

保存sessionStorage：sessionStorage.setItem("key","value");
獲取sessionStorage: sessionStorage.getItem("key");