有沒有必要將 DOM 結構緩存到本地？如果有，意義是什麼？

01-03

將 DOM 結構緩存到本地存儲里有必要嗎? 目前的項目是一個靜態頁面，內容變化不是很頻繁，頁面分成N個獨立模塊，每個模塊由不同的人維護。如果將這些內容緩存到本地存儲，然後利用時間戳機制，只有時間戳過期的時候才會去伺服器更新。所有的模塊的更新只使用一個 HTTP 請求，也就是說只會比平常多出一個請求，但並不是每個模塊獨立去更新。

離線緩存的優點是可以優化平均載入速度（在緩存形成後才加速），大致的應用場景如下：

1）localStorage（LS）

可以把 header、footer 等不太常變動的元素的 innerHTML 儲存在 LS 里，在頁面上只要保留一個容器元素即可。

var headerSnippet = localStorage.getItem("header");

if(headerSnippet !isExpired){

document.querySelector("#header").innerHTML = headerSnippet;

}else{

// if not cached, use ajax to load snippet then save to LS.

// also you can compare the expire data to know if updated.

}

也可以把 image 等文件以 data URI 的形式保存在 LS，適當的時候填充上去。

var img = document.querySelector("#img-placeholder");

img.src = localStorage.getItem("banner"); // data:base64;image/png,qee41e4i6b...

var css = "background-image: url(" + localStorage.getItem("background") + ");";

var link.href = localStorage.getItem("special-css");

以上的例子是通過第一次載入時緩存來加速以後的速度，可能有朋友會問，本來就有 cache 設置，何必這樣麻煩。

是的，但是：

－伺服器上定義的 cache 有期限，雖然可以設置過期時間長一點。

－可以被用戶清空緩存。

而 LS：

－ programmable。可以通過 ajax 載入，有點 bigPipe 的味道，並且頁面交互階段也可以實時更新。但會有安全性問題。

－過期時間全看客戶端，幾乎無限期，但也帶來了別的問題。

－很難被清空，目前沒有明確選項可以清空（Chrome），除了 inspector 和 JS。

2）manifest

這個沒什麼好說的，把指定的文件當成本地文件（file://）。

優點是前戲簡單，但插入後伴隨痛楚——更新緩存是很痛苦的事，並且不易刪除（Chrome inspector 也不讓我刪）。

使用的時候注意一下：

－ LS 應用場景很廣，IE8+ 就可以了，IE7- 也可以用 userdata 湊合。只是太依賴 JS，你懂的。

－ manifest 算是比較完美的，緩存的過程全由瀏覽器負責，但是要配置伺服器，維護起來不算靈活，全局採用需要相當謹慎。並且只有新瀏覽器能支持。

如果用了localStorage ，可以做離線應用。

localStorage可以代替Cookie，緩存用戶的愛好，比cookie安全，沒有cookie的大小限制，不過localStorage目前也存在安全問題（畢竟剛剛起步，而且瀏覽器支持不好）。

根據你的情況，基本可以用etag和last-modified。但是，localStorage更持久，時間更長。建議在etag和last-modified的基礎上加上localStorage以面向未來的html5。

嘗試下伺服器端配置 . 據說可以做到. 沒嘗試..