html如何緩存
㈠ html5 離線緩存怎麼實現的
HTML5離線存儲和本地緩存
一.離線存儲
有一個web應用有三個文件index.html,a.js,b.css，現在需要把js和css文件緩存起來
1.在index.html里加上<htmlmanifest="test.manifest">
2.manifest清單格式如下
CACHEMANIFEST
#上面一句必須
#v1.0.0
#需要緩存的文件
CACHE:
a.js
b.css
#不需要緩存的文件
NETWORK:
*
#無法訪問頁面
FALLBACK:
404.html
3.manifest文件的mime-type必須是text/cache-manifest類型
注意點：
1.對於每個index.html?id=1或index.html?id=2都會分別緩存index.html頁面，可以通過chrome瀏覽器Resources/ApplicationCache觀察
2.如果想更新緩存內容，只要修改下manifest文件即可，如改版本號v1.0.1
4.離線存儲如果資源有更新，可以通過如下代碼來監聽，但第一次載入還會是原來的版本
window.applicationCache.addEventListener('updateready',function(e){
if(window.applicationCache.status==window.applicationCache.UPDATEREADY){
window.applicationCache.swapCache();
if(confirm("lodingnew?")){
window.location.reload()
}
}
},false)
二.本地緩存
localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()
1.本地存儲永不過期，除非自己去清除
2.可以通過chrome瀏覽器Resources/LocalStorage來查看
3.不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1
㈡ html5緩存的問題，如何正確設置
html5緩存正確的設置辦法：
1、啟用緩存
設置方法：
<html manifest="example.appcache">
...
</html>
2、設定緩存訪問的范圍，配置到MANIFEST中：
CACHE MANIFEST
# v1 - 2011-08-13
# This is a comment.
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah
㈢ 怎麼學習html5裡面的離線緩存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
HTML5離線存儲和本地緩存
一.離線存儲
有一個web應用有三個文件index.html,a.js,b.css，現在需要把js和css文件緩存起來
1.在index.html里加上<html manifest="test.manifest">
2.manifest清單格式如下
CACHE MANIFEST
#上面一句必須
#v1.0.0
#需要緩存的文件
CACHE:
a.js
b.css
#不需要緩存的文件
NETWORK:
*
#無法訪問頁面
FALLBACK:
404.html
3.manifest文件的mime-type必須是 text/cache-manifest類型
注意點：
1.對於每個index.html?id=1或index.html?id=2都會分別緩存index.html頁面，可以通過chrome瀏覽器Resources/Application Cache觀察
2.如果想更新緩存內容，只要修改下manifest文件即可，如改版本號v1.0.1
4.離線存儲如果資源有更新，可以通過如下代碼來監聽，但第一次載入還會是原來的版本
window.applicationCache.addEventListener('updateready',function(e){
if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
window.applicationCache.swapCache();
if(confirm("loding new?")){
window.location.reload()
}
}
},false)
二.本地緩存
localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()
1.本地存儲永不過期，除非自己去清除
2.可以通過chrome瀏覽器Resources/Local Storage來查看
3.不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1
㈣ 如何將html文件緩存到伺服器內存 （iis）
你好，這樣是不太可取的。IIS和網站代碼都沒有這個功能設置。內存是用來臨時存放運行文件的，一但斷電就沒有了，不能用來存長固定的文件。。如果同時請求訪問的人數過多，那麼可能會響應不過來。。另外，個人覺得目前我們網站訪問的瓶頸並不是硬碟速度，伺服器硬碟讀也是百M/s的，而網路一般是十M，最多也才百M吧。。如果判斷出的確是硬碟速度瓶頸，那麼就使用固態硬碟。。。
個人建議啟用IIS的Gzip壓縮（網路：http://ke..com/view/966625.htm）是非常有效的。
當然了，如果你一定要將文件載入到內存里，可以試著用下面的方式，只是思路， 沒有驗證：
1、安裝使用 內存虛擬硬碟（ramdisk） 相關軟體，通過把內存虛擬成硬碟的技術增加一個高速的磁碟。
2、添加一個自動啟動任務，就是在完成內存虛擬硬碟後，將網站源文件直接拷到那個虛擬盤分區里去。然後再啟動IIS。 （這個步驟用一個批處理文件就可以）
理論上是可行的，我相信也一定可以成功，但至於效果，不太敢保證。
如果是靜態文件，直接拷貝就可以，如果是動態的，在保存的，那麼批處理文件就要進行修改了，不然斷電後沒有保存。。不過如果是動態網站，只需要把常用到的文件載入到內存是吧，那隻在IIS上建立相應的虛擬目錄到內存虛擬的硬碟上，那些有改動的文件，如xml文件和mdb資料庫等，就直接保存到物理硬碟路徑上，這樣可以避免斷電和內存出錯導致的數據丟失
內存虛擬硬碟 網路：http://ke..com/view/1517248.htm
內存虛擬硬碟軟體 vsuite ramdisk 網路：http://ke..com/view/5130752.htm
希望以上回復對你有幫助
㈤ html5怎麼緩存動態html頁面
HTML頁面本身可以是模板，獲取後台數據後動態更新頁面。這種情況下用HTML5的OfflineWeb功能可以緩存作為模板的HTML頁面。或者向FT那樣，乾脆把頁面壓縮存放在localstorage里，當然有容量限制。
㈥ 關於html緩存設置
通過HTTP的META設置expires和cache-control
指令不區分大小寫，並且具有可選參數，可以用令牌或者帶引號的字元串語法。多個指令以逗號分隔。
客戶端可以在HTTP請求中使用的標准 Cache-Control 指令。
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached
伺服器可以在響應中使用的標准 Cache-Control 指令。
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public
Cache-control: private
Cache-control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-control: s-maxage=<seconds>
拓展緩存指令不是HTTP緩存標準的一部分，使用前請注意檢查 兼容性 ！
Cache-control: immutable
Cache-control: stale-while-revalidate=<seconds>
Cache-control: stale-if-error=<seconds>
public
表明響應可以被任何對象（包括：發送請求的客戶端，代理伺服器，等等）緩存。
private
表明響應只能被單個用戶緩存，不能作為共享緩存（即代理伺服器不能緩存它）。
no-cache
強制所有緩存了該響應的緩存用戶，在使用已存儲的緩存數據前，發送帶驗證器的請求到原始伺服器
only-if-cached
表明如果緩存存在，只使用緩存，無論原始伺服器數據是否有更新
max-age=<seconds>
設置緩存存儲的最大周期，超過這個時間緩存被認為過期(單位秒)。與Expires相反，時間是相對於請求的時間。
s-maxage=<seconds>
覆蓋max-age 或者 Expires 頭，但是僅適用於共享緩存(比如各個代理)，並且私有緩存中它被忽略。
max-stale[=<seconds>]
表明客戶端願意接收一個已經過期的資源。 可選的設置一個時間(單位秒)，表示響 應不能超過的過時時間。
min-fresh=<seconds>
表示客戶端希望在指定的時間內獲取最新的響應。
must-revalidate
緩存必須在使用之前驗證舊資源的狀態，並且不可使用過期資源。
proxy-revalidate
與must-revalidate作用相同，但它僅適用於共享緩存（例如代理），並被私有緩存忽略。
immutable
表示響應正文不會隨時間而改變。資源（如果未過期）在伺服器上不發生改變，因此客戶端不應發送重新驗證請求頭（例如If-None-Match或If-Modified-Since）來檢查更新，即使用戶顯式地刷新頁面。在Firefox中，immutable只能被用在 https:// transactions.
發送如下指令可以關閉緩存。此外，可以參考Expires 和 Pragma 標題。
對於應用程序中不會改變的文件，你通常可以在發送響應頭前添加積極緩存。這包括例如由應用程序提供的靜態文件，例如圖像，CSS文件和JavaScript文件。另請參閱Expires標題。
緩存主要兩個策略 強制緩存 ，協商緩存
強制緩存就是設置本地資源html img js等等緩存多長時間 超過時間就去伺服器端取。
協商緩存就是每次都詢問伺服器資源是否已經過期 沒有過期就使用緩存 已經過期就從伺服器上重新取。
緩存流程可以分三個階段 本地緩存，協商緩存 ，緩存失敗
現在的vue項目里都不是這樣緩存的 我個人感覺這是在靜態頁面時的緩存辦法
現在都是webpack打包時通過 hash chunkhash contenthash來決定緩存方式 主要就是在請求的文件名稱後面加一個id 來判斷文件是否已經更新。
㈦ 微信公眾號html緩存處理
近期在發版驗證時遇到一個問題，微信公眾號登入後頁面顯示的是老的，強制刷新後，再退出重新登入，仍然顯示的是老的頁面；
經過一番查找得到了解決方案：
（1）公眾號放的菜單地址後加 ?version=1.0.0 每次更新頁面則更新菜單；
但是這樣每次發版還得修改公眾號的菜單，多一步很不方便；
於是和前端一塊嘗試尋找到另一中解決方案：
（2）前端在html的header中加入緩存策略
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache" />
這樣就徹底解決了緩存問題；
但是注意，往往遇到此問題時，已經緩存了沒有加緩存策略的html文件，需要清除掉緩存，載入新的帶緩存策略的html文件，將來才會實時更新；但是也不能讓用戶每個都清理緩存啊；
於是就要配合第一種解決方法，在菜單鏈接後面加參數，這樣用戶側會重新load新版本的html（微信菜單設置發布後，有將近10分鍾的延時），這樣配合使用就完美解決了我們的問題；
期間多次嘗試發現，微信的緩存策略和頁面地址的後綴參數相關，使用相同的後綴，在不設置緩存策略下，就能回到對應的版本，很強大，也很雞肋
㈧ 如何給html網頁設置緩存
在Apache環境下，可以通過在.htaccess文件中添加下面的代碼，設置圖片的HTTP緩存和有效期（需要開啟apache的headers模塊支持）：
# Image and Flash content Caching for ONE Year blog.gimhoy.com<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$"> Header set Cache-Control "max-age=3156000"
其中max-age後面這個數字就是設置的緩存有效期（以秒為單位），比如上面的代碼設置了網站的圖片使用為期一年（3156000秒）的HTTP緩存。
在Nginx下，可以通過修改nginx.conf配置文件，來修改緩存設置：
location ~* \.(flv|gif|jpg|jpeg|png|ico|swf)$ { expires 1y; access_log off; break; }
同樣的方法，你也可以給js和css文件設置緩存。
㈨ 請教高手，html頁面中的圖片，如何讓瀏覽器緩存至本地
可能對方設置的網頁就已經禁止緩存了。大概是因為它們更新速度比較快的緣因
㈩ html5 如何更新離線緩存
需要伺服器。這里用tomcat伺服器來講解。
首先要先把.manifest後綴的文件 的mine類型配置為text/cache-manifest。
一講到tomcat配置，熟悉的朋友自然就會想到web.xml這個文件，沒錯，在文件中加入如下配置就行：
1 <mime-mapping>
2 <extension>manifest</extension>
3 <mime-type>text/cache-manifest</mime-type>
4 </mime-mapping>
然後寫一個xxx.manifest文件，xxx是你自己取的一個名字。這個文件的格式是這樣的：
CACHE MANIFEST
#version 1.5
CACHE:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif
第一行是必須的，它標識這是manifest的配置文件。
#version 1.5
這句是注釋，沒實際的作用，我在這里只是想讓瀏覽器更新緩存文件。因為當這個manifest文件與原來一樣的時候，瀏覽器是不會去重新載入緩存文件的，所以我們可以通過這個注釋，一方面修改版本號，另一方面讓瀏覽器更新緩存。
CACHE:
這行指示出下面的文件是要緩存的。示例中，緩存了當前頁面：MyTest.html，以及一些css和js文件 還有圖片。
還有幾個關鍵字示例中沒提到，就是
NETWORK:
FALLBACK:
NETWORK 指不想緩存的頁面；FALLBACK 是指請求的文件 沒有找到或該文件的伺服器沒有響應時的替代方案，比如我們想請求某個嵌套頁面，但這個頁面的伺服器連接不上了，那麼我可以轉向另外一個指定的頁面。
這是第二步，第三步，只要在<html>標簽中加上manifest的位置就行了：
<html manifest="NAME.manifest">
到這里，就可以實現簡單的離線應用了。
那些緩存的文件放在哪呢？
在chrome上測試，發現它是按自己的機制來分塊保存這些文件的，所以我沒找不到完整的文件。保存的數據在：
C:\Users\jasonling\AppData\Local\Google\Chrome\User Data\Default 裡面，具體怎麼存，筆者還不了解。
火狐上的文件也是按它自己的機制來存的，不過筆者本人用sqlite打開後，找到了緩存文件的具體信息：