Web開發：localStorage與緩存的HTTP

Question

假設我有一個Web服務器響應帶有.json文件的GET。 對該GET的響應指定瀏覽器將響應緩存5年。

我們還說我有一個網頁，在頁面加載時對JSON數據進行GET請求。 當響應返回時，JSON數據將放入localStorage 。

此時，如果我想再次檢索該JSON數據，這將更快：

1. 從localStorage獲取它
2. 執行另一個Ajax GET請求（瀏覽器實際上不會發出請求 - 它將訪問瀏覽器緩存）

你能用自動化測試或例子來證明嗎？

為什么你的回答是正確的？

Answer 1

我想你問的是錯誤的問題。 在活動會話期間哪個更快，基本上是不相關的，因為兩者都存儲在本地，並且本地查找幾乎是瞬時的（與遠程查找相比）。 （需要注意的是：並非所有瀏覽器都依賴於緩存標頭，但通常它更傾向於過度緩存，而不是緩存不足。）

但是，您的示例情況是假設瀏覽器的緩存永遠不會被清除。 這通常是錯誤的：用戶不僅可以隨時清除緩存（或將其設置為自動清除），但瀏覽器本身可能會決定隨意刪除網站的緩存數據（通常取決於空間）。

相反，您應該考慮數據的壽命，以及用戶再次尋找它的頻率。

如果這些信息是他們偶爾只能訪問的信息，那么您應該依賴瀏覽器的內置緩存機制。 這允許瀏覽器在不再需要時將其刪除。

但是，如果數據是定期加載的，或者需要每次訪問該站點，那么您應該使用localStorage 。 本地存儲不會隨緩存自動清除，實際上通常只有在用戶清除該網站的cookie時才會清空。 這使得信息可以保留更長時間，即使網站沒有經常訪問以保持緩存刷新。 但是你現在突然要負責維護這個信息數據庫。

最后，最重要的問題是：作為開發人員，開發更復雜的基於localStorage的解決方案的成本效益是否值得？ 換句話說，您是否會看到最終用戶緩存1-2s查找的足夠好處，或者您是在談論大量信息，用戶將看到30s +增益。

作為一個例子，對於我開發的大型復雜Web應用程序，我使用localStorage來存儲大量的JS庫。 當重新訪問該站點時，只需從本地副本解析它們（在驗證哈希之后）。 該解決方案允許各種瀏覽器看到啟動時間的大幅減少，即使緩存已被清除。 （我不是說這是一個很好的用途，但它當時有效。）

Answer 2

兩個消息來源聲稱localStorage在速度上勝過瀏覽器緩存。

• http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/
• http://jsperf.com/localstorage-versus-browser-cache

這是我從localStorage加載JavaScript文件的看法。 代碼很小，您可以在我的Github項目https://github.com/webpgr/cached-webpgr.js上查看它，或者使用下面完整示例中的代碼。

完整的圖書館：

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

打電話給圖書館

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});

Answer 3

如果在現代UA（瀏覽器）中這兩種方法中的任何一種都應該可以忽略不計。

為什么我的回答是正確的你問？ 因為我實現了這兩種機制。