⑴ js如何解決頁面緩存
你可以再html頁面禁止緩存的啊,比如在html頁面加上標簽
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
等這四個都是可以的
具體的可以再網路上找到
⑵ js獲取網站的緩存
手機版本的都支持html5；可以用localStorage.setItem('nowPage',222);這種方式存儲下來，下次打開首先localStorage.getItem('nowPage')，如果是undefined，則沒有看過，默認從第一頁看起，如果有就從當前頁看起，望採納！
⑶ js文件緩存到本地
對js文件進行hash，每次客戶端請求的時候取回hash，如果緩存的js的hashcode與取回的hashcode不一致，則重新download腳本文件，否則不用。
⑷ ☆前端優化：瀏覽器緩存技術介紹
在前端開發中，性能一直都是被大家所重視的一點，然而判斷一個網站的性能最直觀的就是看網頁打開的速度。 其中提高網頁反應速度的一個方式就是使用緩存 。緩存技術一直一來在WEB技術體系中扮演非常重要角色，是快速且有效地提升性能的手段。
一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，並且由於緩存文件可以重復利用，還可以減少帶寬，降低網路負荷。
所以，緩存技術是無數WEB開發從業人員在工作過程中不可避免的一大問題。 在產品開發的時候我們總是想辦法避免緩存產生，而在產品發布之時又在想策略管理緩存提升網頁的訪問速度 。了解瀏覽器的緩存命中原理，是開發WEB應用的基礎，本文著眼於此，學習瀏覽器緩存的相關知識，總結緩存避免和緩存管理的方法，結合具體的場景說明緩存的相關問題。希望能對有需要的人有所幫助。
在實際WEB開發過程中，緩存技術會涉及到不同層、不同端，比如：用戶層、系統層、代理層、前端、後端、服務端等， 每一層的緩存目標都是一致的，就是盡快返回請求數據、減少延遲 ，但每層使用的技術實現是各有不同，面對不同層、不同端的優劣，選用不同的技術來提升系統響應效率。所以，我們首先看下各層的緩存都有哪些技術，都緩存哪些數據，從整體上，對WEB的緩存技術進行了解，如下圖所示：
本篇文章重點講的就是上面紅色框部分緩存內容。
當瀏覽器請求一個網站的時候，會載入各種各樣的資源，比如：HTML文檔、圖片、CSS和JS等文件。對於一些不經常變的內容，瀏覽器會將他們保存在本地的文件中，下次訪問相同網站的時候，直接載入這些資源，加速訪問。
那麼如何知曉瀏覽器是讀取了緩存還是直接請求伺服器？如下圖網站來做個示例：
第一次打開該網站後，如果再次刷新頁面。會發現瀏覽器載入的眾多資源中，有一部分size有具體數值，然而還有一部分請求，比如圖片、css和js等文件並沒有顯示文件大小，而是顯示了 from dis cache 或者 from memory cache 字樣。這就說明了，該資源直接從本地硬碟或者瀏覽器內存讀取，而並沒有請求伺服器。
瀏覽器啟用緩存至少有兩點顯而易見的好處： （1）減少頁面載入時間；（2）減少伺服器負載；
瀏覽器是否使用緩存、緩存多久，是由伺服器控制的 。准確來說，當瀏覽器請求一個網頁（或者其他資源）時， 伺服器發回的響應的「響應頭」部分的某些欄位指明了有關緩存的關鍵信息 。下面看下，HTTP報文中與緩存相關的首部欄位：
根據上面四種類型的首部欄位不同使用策略， 瀏覽器中緩存可分為強緩存和協商緩存 ：
當瀏覽器對某個資源的請求命中了強緩存時， 返回的HTTP狀態為200 ，在chrome的開發者工具的network裡面 size會顯示為from cache ，比如：京東的首頁里就有很多靜態資源配置了強緩存，用chrome打開幾次，再用f12查看network，可以看到有不少請求就是從緩存中載入的：
Expires是HTTP 1.0提出的一個表示資源過期時間的header，它描述的是一個絕對時間，由伺服器返回，用GMT格式的字元串表示 ，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT，包含了Expires頭標簽的文件，就說明瀏覽器對於該文件緩存具有非常大的控制權。
例如，一個文件的Expires值是2020年的1月1日，那麼就代表，在2020年1月1日之前，瀏覽器都可以直接使用該文件的本地緩存文件，而不必去伺服器再次請求該文件，哪怕伺服器文件發生了變化。
所以， Expires是優化中最理想的情況，因為它根本不會產生請求 ，所以後端也就無需考慮查詢快慢。它的緩存原理，如下：
Expires是較老的強緩存管理header， 由於它是伺服器返回的一個絕對時間 ，在伺服器時間與客戶端時間相差較大時，緩存管理容易出現問題， 比如：隨意修改下客戶端時間，就能影響緩存命中的結果 。所以在HTTP 1.1的時候，提出了一個新的header， 就是Cache-Control，這是一個相對時間，在配置緩存的時候，以秒為單位，用數值表示 ，如：Cache-Control:max-age=315360000，它的緩存原理是：
Cache-Control描述的是一個相對時間 ，在進行緩存命中的時候， 都是利用客戶端時間進行判斷 ，所以相比較Expires，Cache-Control的緩存管理更有效，安全一些。
這兩個header可以只啟用一個，也可以同時啟用， 當response header中，Expires和Cache-Control同時存在時，Cache-Control優先順序高於Expires ：
此外，還可以為 Cache-Control 指定 public 或 private 標記。 如果使用 private，則表示該資源僅僅屬於發出請求的最終用戶，這將禁止中間伺服器（如代理伺服器）緩存此類資源 。對於包含用戶個人信息的文件（如一個包含用戶名的 HTML 文檔），可以設置 private，一方面由於這些緩存對其他用戶來說沒有任何意義，另一方面用戶可能不希望相關文件儲存在不受信任的伺服器上。需要指出的是，private 並不會使得緩存更加安全，它同樣會傳給中間伺服器（如果網站對於傳輸的安全性要求很高，應該使用傳輸層安全措施）。 對於 public，則允許所有伺服器緩存該資源 。通常情況下，對於所有人都可以訪問的資源（例如網站的 logo、圖片、腳本等）， Cache-Control 默認設為 public 是合理的 。
當瀏覽器對某個資源的請求沒有命中強緩存， 就會發一個請求到伺服器，驗證協商緩存是否命中，如果協商緩存命中，請求響應返回的http狀態為304並且會顯示一個Not Modified的字元串 ，比如你打開京東的首頁，按f12打開開發者工具，再按f5刷新頁面，查看network，可以看到有不少請求就是命中了協商緩存的：
查看單個請求的Response Header， 也能看到304的狀態碼和Not Modified的字元串，只要看到這個就可說明這個資源是命中了協商緩存，然後從客戶端緩存中載入的 ，而不是伺服器最新的資源：
【Last-Modified，If-Modified-Since】的控制緩存的原理，如下 ：
【Last-Modified，If-Modified-Since】都是根據伺服器時間返回的header，一般來說， 在沒有調整伺服器時間和篡改客戶端緩存的情況下，這兩個header配合起來管理協商緩存是非常可靠的，但是有時候也會伺服器上資源其實有變化，但是最後修改時間卻沒有變化的情況 ，而這種問題又很不容易被定位出來，而當這種情況出現的時候，就會影響協商緩存的可靠性。 所以就有了另外一對header來管理協商緩存，這對header就是【ETag、If-None-Match】 。它們的緩存管理的方式是：
Etag和Last-Modified非常相似，都是用來判斷一個參數，從而決定是否啟用緩存。 但是ETag相對於Last-Modified也有其優勢，可以更加准確的判斷文件內容是否被修改 ，從而在實際操作中實用程度也更高。
協商緩存跟強緩存不一樣，強緩存不發請求到伺服器， 所以有時候資源更新了瀏覽器還不知道，但是協商緩存會發請求到伺服器 ，所以資源是否更新，伺服器肯定知道。大部分web伺服器都默認開啟協商緩存，而且是同時啟用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】，比如apache:
如果沒有協商緩存，每個到伺服器的請求，就都得返回資源內容，這樣伺服器的性能會極差。
【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】一般都是同時啟用，這是為了處理Last-Modified不可靠的情況。有一種場景需要注意：
比如，京東頁面的資源請求，返回的repsonse header就只有Last-Modified，沒有ETag：
協商緩存需要配合強緩存使用，上面這個截圖中，除了Last-Modified這個header，還有強緩存的相關header， 因為如果不啟用強緩存的話，協商緩存根本沒有意義 。
如果資源已經被瀏覽器緩存下來，在緩存失效之前，再次請求時，默認會先檢查是否命中強緩存，如果強緩存命中則直接讀取緩存，如果強緩存沒有命中則發請求到伺服器檢查是否命中協商緩存，如果協商緩存命中，則告訴瀏覽器還是可以從緩存讀取，否則才從伺服器返回最新的資源。其瀏覽器判斷緩存的詳細流程圖，如下：
⑸ 如何完整保存網頁全部內容
在瀏覽器設置里的更多工具里。
1、首先需要點擊瀏覽器右上角三個點，在其彈出的下拉菜單中點擊「更多工具」按鈕後點擊「網頁另存為」選項：
⑹ javascript腳本緩存怎麼解決
禁用客戶端緩存
HTM網頁
<META HTTP-EQUIV="pragma"
CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control"
CONTENT="no-cache, must-revalidate">
<META
HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57
GMT">
ASP網頁
<%
Response.Expires =
-1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
%>
PHP網頁
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
JSP
response.setHeader("Pragma","No-Cache");
response.setHeader("Cache-Control","No-Cache");
response.setDateHeader("Expires", 0);
C#中禁止cache的方法！
Response.Buffer=true;
Response.ExpiresAbsolute=System.DateTime.Now.AddSeconds(-1);
Response.Expires=0;
Response.CacheControl="no-cache";
加入
<MEAT HTTP-EQUIV="Pragma"
CONTENT="no-cache">
不緩存。
一、Expires(期限)
說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新調閱。
用法：＜META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997
08:21:57 GMT"＞
注意：必須使用GMT的時間格式。
二、Pragma(cache模式)
說明：禁止瀏覽器從本地機的緩存中調閱頁面內容。
用法：＜META
HTTP-EQUIV="Pragma" CONTENT="no-cache"＞
注意：這樣設定，訪問者將無法離線瀏覽。
三、腳本實現
<%
response.expires = 0
response.expiresabsolute = now()
- 1
response.addHeader "pragma","no-cache"
response.addHeader "cache-control","private"
Response.cachecontrol = "no-cache"
%>
IE瀏覽器訪問一個網頁的時候，首先會到臨時文件夾中去尋找和這個網頁相關的各個文件（如各種圖片）。如果在臨時文件夾中找到了一些文件，那麼瀏覽器就會使用這些臨時文件夾中的文件，而不去伺服器下載這些文件。
不幸的是，我的伺服器上的文件是經常變化的，如果IE優先考慮臨時文件夾中的文件，那麼就不能反映出我伺服器上的變化。
現在有兩個解決辦法，但都有缺陷：
一是使用網頁的自刷新，但是刷新速度快的話會有閃爍，不符合我其他方面的要求。
二是在IE設置中設成「每次訪問此頁時檢查」。此時IE不考慮臨時文件夾中的內容，直接從服務下載各個文件。但是這種辦法需要用戶進行設置，對用戶來說有點麻煩。而且這樣的設置會影響用戶訪問其他網站的速度。
⑺ 如何清除在瀏覽器 中的js緩存文件
關於瀏覽器緩存
瀏覽器緩存，有時候我們需要他，因為他可以提高網站性能和瀏覽器速度，提高網站性能。但是有時候我們又不得不清除緩存，因為緩存可能誤事，出現一些錯誤的數據。像股票類網站實時更新等，這樣的網站是不要緩存的，像有的網站很少更新，有緩存還是比較好的。今天主要介紹清除緩存的幾種方法。
清理網站緩存的幾種方法
meta方法
?
1
2
3
4
//不緩存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
清理form表單的臨時緩存
<body onLoad="javascript:document.yourFormName.reset()">
其實form表單的緩存對於我們書寫還是有幫助的，一般情況不建議清理，但是有時候為了安全問題等，需要清理一下！
jquery ajax清除瀏覽器緩存
方式一：用ajax請求伺服器最新文件，並加上請求頭If-Modified-Since和Cache-Control,如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
},
success:function(response){
//操作
}
async:false
});
方法二，直接用cache:false,
?
1
2
3
4
5
6
7
8
9
10
11
$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
cache:false,
ifModified :true ,
success:function(response){
//操作
}
async:false
});
方法三：用隨機數，隨機數也是避免緩存的一種很不錯的方法！
URL 參數後加上 "?ran=" + Math.random(); //當然這里參數 ran可以任意取了
方法四：用隨機時間，和隨機數一樣。
在 URL 參數後加上 "?timestamp=" + new Date().getTime();
用php後端清理
在服務端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)
方法五：
window.location.replace("WebForm1.aspx");
參數就是你要覆蓋的頁面，replace的原理就是用當前頁面替換掉replace參數指定的頁面。
這樣可以防止用戶點擊back鍵。使用的是javascript腳本，舉例如下：
a.html
以下是引用片段：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>a</title>
<script language="javascript">
function jump(){
window.location.replace("b.html");
}
</script>
</head>
<body>
<a href="javascript:jump()" rel="external nofollow" rel="external nofollow" >b</a>
</body>
</html>
b.html
以下是引用片段：
⑻ js清理手機緩存
在JavaScript中清除手機緩存的方法並不是直接使用JavaScript代碼就能完成的，因為JavaScript自身不具備清除緩存的能力，需廳扮要通過一些特定的API來實現。
可以通過以下步驟清除手機緩存：
1. 使用HTML5中的應用程序緩存(Application Cache)來緩存部分頁面和資源文件，當然，緩存的數據也可以隨時被清除。
2. 使用瀏覽器提供的緩存清除API。不同的瀏宴伏斗覽器提供不同的API來清除緩存，例如Chrome瀏覽器提供了chrome.browsingData.clear API介面，可以通過該介面來清除瀏晌磨覽器緩存。
需要注意的是，清除緩存會導致部分數據丟失，同時清除緩存的方法也因不同的瀏覽器和操作系統而異，所以在具體實現時要仔細查看相關文檔並謹慎操作。
⑼ 怎麼在只使用tomcat的情況上，自動緩存js和css或者image等文件
給網址後面添加一個隨機數（或者是任意的字元串）即可，比如原來的網址是這樣的：
http....../.../1.htm
改為
http....../.../1.htm?1234
即可（注意問號不能省）。
瀏覽器是根據網址來緩存的，所以只要給網址接個尾巴，瀏覽器就會認為是新網址，就會從網上重新下載數據了。當然，如果下次再次改變了網頁內容，這個尾巴就要再次修改。
給css和js添加所謂版本號其實也是同一個原理。這個版本號其實就是給css和js的網址接個尾巴而已。
這個也同樣適用網頁裡面的圖片、音樂等資源，事實上只要是http協議的元素都可以利用這個辦法來避開緩存實時刷新。