本地資料儲存解決方案以及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");