Cache, often called cache, is a different memory system in a computer that stores frequently used data and instructions for a short period of time. When loading a website, the browsers we use automatically cache some resources, such as images, scripts, and stylesheets, so that they can be used again when the page reloads. Not only does this shorten the time it takes for your website to load, it also helps reduce the amount of data that has to be sent over the network. But this kind of cache stored by the browser also has some disadvantages. Problems can occur if cached resources are out of date or if the browser is unable to reload the page because it is using cached resources. To do this we sometimes have to clear these caches.
Users can use JavaScript to clear the browser's cache as needed. These are described below -
location.reload() method - One of the effective methods that can be used to reload the current page and disable caching. The user must give a boolean value as parameter and the value should be set to true. Instead of using cached versions, this technique forces the browser to reload all resources from the server.
navigator.serviceWorker.getRegistrations() method - This is another way to retrieve all Service Worker registrations using navigator.serviceWorker and then run the unregister method for each registration object's getRegistrations() method. The browser will then delete its HTTP cache.
caches.open() and cache.delete() methods - This method uses the Cache API to open a named cache and then deletes a specific resource from the cache using the delete() method
localStorage.clear() and sessionStorage.clear() methods - To remove all key-value pairs from a localStorage object, the user can use the localStorage.clear() method. The sessionStorage.clear() function can delete all key-value pairs from the sessionStorage object.
Use location.reload() method
When the boolean parameter is set to true, the location.reload() method will not cache the current page, but will reload it. If you specify true as a parameter, the browser will download all resources (including images and scripts) directly from the server instead of using cached copies.
grammar
location.reload(true);
In the above syntax, location is the global object of JavaScript and overloads the location method.
Example
In this example, we use the location.reload() method to clear cache memory through JavaScript. We used a "clear cache" button and associated it with a click event. The click event handler executes the location.reload() method with parameter true. Whenever the user clicks the button, the JavaScript forces the browser to reload the web page without the cached file.
<html>
<body>
<h2 id="Clearing-i-cache-memory-i-using-JavaScript">Clearing <i> cache memory </i> using JavaScript</h2>
<div>
<img
id = "myImage"
style = "height: 200px"
src ="https://www.tutorialspoint.com/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>
The web page displays this message and quickly reloads the latest files.
Use navigator.serviceWorker.getRegistrations() method
In JavaScript, the navigator.serviceWorker.getRegistrations() method is the second way that users can clear cache memory by unregistering all service worker thread registrations, navigator.serviceWorker.getRegistrations( ) method can be used to clear the browser's HTTP cache. One type of Web Worker is called a Service Worker and is used to perform a large number of processes in the background, such as caching resources. The browser must clear its HTTP cache by deactivating all service worker registrations.
grammar
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations()
.then(function(registrations) {
for(let registration of registrations) {
registration.unregister();
}
});
}
In the above syntax, we check if "serviceWorker" is available in the navigator object. We then unregister the Service Worker using the navigator.serviceWorker.getRegistrations() and registration.unregister() methods.
Example
In this example, we clear the cache by using JavaScript to unregister the Service Worker. We used a "clear cache" button and associated it with a click event. The click event handler executes a function that unregisters the Service Worker. The navigator.serviceWorker.getRegistrations() and registration.unregister() methods are used to unregister a Service Worker. After logging out, we display a message on the web page.
<html>
<body>
<h2 id="Clearing-i-cache-memory-i-using-JavaScript">Clearing <i>cache memory</i> using JavaScript</h2>
<div>
<img id = "myImage" style = "height: 100px" src ="https://www.tutorialspoint.com/images/logo.png" / alt="How to clear cache using JavaScript?" >
</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>
Clearing the cache is a best practice, but sometimes it can affect the performance of your web pages because all files must be re-fetched. JavaScript has the ability to clear cache, which can be used as needed.
The above is the detailed content of How to clear cache using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Python vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AMPython is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.
The Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AMC and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.
JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AMJavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.
JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AMThe main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.
Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AMUnderstanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.
Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AMPython is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AMPython and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.
From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AMThe shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Atom editor mac version download
The most popular open source editor
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
Zend Studio 13.0.1
Powerful PHP integrated development environment
