資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 清除快取記憶體？
快取記憶體，通常稱為快取，是計算機中一種不同的記憶體系統，用於短期儲存常用資料和指令。載入網站時，我們使用的瀏覽器會自動快取一些資源，例如影像、指令碼和樣式表，以便在重新載入頁面時再次使用。這不僅可以縮短網站載入時間，還可以減少需要透過網路傳送的資料量。但瀏覽器儲存的快取記憶體也有一些缺點。如果快取的資源過期，或者瀏覽器因為使用快取資源而無法重新載入頁面，則可能會出現問題。為此，我們有時需要清除這些快取。
使用者可以根據需要使用 JavaScript 清除瀏覽器的快取記憶體。這些方法描述如下：
location.reload() 方法 − 一種可以用來重新載入當前頁面並停用快取的有效方法。使用者必須提供一個布林值作為引數，並且該值應設定為 true。此方法強制瀏覽器直接從伺服器重新載入所有資源，而不是使用快取版本。
navigator.serviceWorker.getRegistrations() 方法 − 這是另一種方法，它使用 navigator.serviceWorker 物件的 getRegistrations() 方法檢索所有 service worker 註冊後，為每個註冊執行 unregister 方法。這將導致瀏覽器刪除其 HTTP 快取。
caches.open() 和 cache.delete() 方法 − 此方法使用 Cache API 開啟一個命名快取，然後使用 delete() 方法從快取中刪除特定資源。
localStorage.clear() 和 sessionStorage.clear() 方法 − 要從 localStorage 物件中刪除所有鍵值對，使用者可以使用 localStorage.clear() 方法。而 sessionStorage.clear() 函式可以從 sessionStorage 物件中刪除所有鍵值對。
使用 location.reload() 方法
當布林引數設定為 true 時，location.reload() 方法將不會快取當前頁面，而是重新載入它。如果將 true 指定為引數，瀏覽器將直接從伺服器下載所有資源（包括圖片和指令碼），而不是使用快取的副本。
語法
location.reload(true);
在上面的語法中，location 是 JavaScript 的全域性物件，reload 是 location 的方法。
示例
在這個示例中，我們使用了 location.reload() 方法來使用 JavaScript 清除快取記憶體。我們使用了“清除快取”按鈕並將其與單擊事件關聯。單擊事件處理程式使用引數 true 執行 location.reload() 方法。每當使用者單擊按鈕時，JavaScript 都會強制瀏覽器重新載入網頁，不使用任何快取檔案。
<html>
<body>
<h2>Clearing <i> cache memory </i> using JavaScript</h2>
<div>
<img
id = "myImage"
style = "height: 200px"
src ="https://tutorialspoint.tw/javascript/images/javascript.jpg"/>
</div>
<button onclick = "clearCache()">Clear cache</button>
<div id = "root" style="padding: 10px; background: #bdf0b8"></div>
<script>
let root = document.getElementById('root')
function clearCache() {
root.innerHTML += 'Cache cleared using location.reload(true)'
windows.location.reload(true)
}
</script>
</body>
</html>
網頁顯示此訊息並迅速使用最新檔案重新載入。
使用 navigator.serviceWorker.getRegistrations() 方法
在 JavaScript 中，navigator.serviceWorker.getRegistrations() 方法是使用者可以用來透過登出所有 service worker 註冊來清除快取記憶體的第二種方法，navigator.serviceWorker.getRegistrations() 方法可用於清空瀏覽器的 HTTP 快取。service worker 是一種型別的 web worker，用於在後臺執行許多工，例如快取資源。瀏覽器必須透過停用所有 service worker 註冊來清除其 HTTP 快取。
語法
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations()
.then(function(registrations) {
for(let registration of registrations) {
registration.unregister();
}
});
}
在上面的語法中，我們檢查 navigator 物件中是否可用“serviceWorker”。然後我們使用 navigator.serviceWorker.getRegistrations() 和 registration.unregister() 方法來登出 service worker。
示例
在這個示例中，我們使用 JavaScript 透過登出 service worker 來清除快取記憶體。我們使用了“清除快取”按鈕並將其與單擊事件關聯。單擊事件處理程式執行登出 service worker 的函式。navigator.serviceWorker.getRegistrations() 和 registration.unregister() 方法用於登出 service worker。登出後，我們在網頁上顯示一條訊息。
<html>
<body>
<h2>Clearing <i>cache memory</i> using JavaScript</h2>
<div>
<img id = "myImage" style = "height: 100px" src ="https://tutorialspoint.tw/images/logo.png" />
</div>
<button onclick = "clearCache()">Clear cache</button>
<div id = "root" style = "padding: 10px; background: #b8f0ea"></div>
<script>
let root = document.getElementById('root')
function clearCache() {
root.innerHTML = 'Cache cleared using navigator.serviceWorker.getRegistrations()'
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.getRegistrations()
.then(function (registrations) {
for (let registration of registrations) {
registration.unregister()
}
})
}
}
</script>
</body>
</html>
清除快取是一種最佳實踐，但有時也可能會影響網頁的效能，因為所有檔案都必須重新獲取。JavaScript 具有清除快取的功能，可以根據需要使用。
32K+ 次瀏覽
