Home >Web Front-end >JS Tutorial >How to clear browser cache in angularJs
This article mainly introduces the method of clearing the browser cache in angularJs. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look
Caching
A cache is a component that can store data transparently so that it can serve requests faster in the future. . Obtaining resources repeatedly may cause data duplication and consume time. Therefore, caching is suitable for some data with little variability. The more requests the cache can serve, the more the overall system performance can be improved.
Browser cache, sometimes we need it, because it can improve website performance and browser speed, and improve website performance. But sometimes we have to clear the cache, because the cache may cause problems and some erroneous data may appear. For example, stock websites are updated in real time. Such websites do not need to be cached. Some websites are rarely updated, so it is better to have cache.
The following is the traditional method of clearing the browser
meta method
//不缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="0">
Clear the temporary cache of the form
<body onLoad="javascript:document.yourFormName.reset()">
ajax clear cache
$.ajax({ url:'www.haorooms.com', dataType:'json', data:{}, cache:false, ifModified :true , success:function(response){ //操作 } async:false });
Use random numbers. Random numbers are also a very good way to avoid caching!
Add "?ran=" Math.random(); //Of course the parameter ran here can be chosen arbitrarily
Use random time, the same as random number.
Add "?timestamp=" new Date().getTime(); after the URL parameters
Use php backend to clean up
Add header("Cache-Control: no-cache, must-revalidate"); and so on on the server side (such as in php)
The following is an introduction to the method of clearing the browser in the angularJs project. Of course, the above traditional method is It is also applicable, but for angularJs, the following items need to be added:
1. Clear the template cache
.run(function($rootScope, $templateCache) { $rootScope.$on('$routeChangeStart', function(event, next, current) { if (typeof(current) !== 'undefined'){ $templateCache.remove(current.templateUrl); } }); });
2. Add random parameters to html
.state("content", { url: "/", views:{ "bodyInfo":{templateUrl: 'tpls/bodyInfo.html?'+ +new Date(), controller:'bodyInfoCtrl'}, "header":{templateUrl: 'tpls/header.html?'+ +new Date(), controller:'headerCtrl' }, "footer":{templateUrl: 'tpls/footer.html?'+ +new Date(), controller:'footerCtrl' } } })
<link rel="stylesheet" href="stylesheets/main.css?version=1.0.3" rel="external nofollow" >
3. Clear the route cache
.config(['$stateProvider', '$urlRouterProvider','$locationProvider','$httpProvider',function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) { // $urlRouterProvider.when("", "/home"); $urlRouterProvider.otherwise('/'); if (!$httpProvider.defaults.headers.get) { $httpProvider.defaults.headers.get = {}; } $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache'; $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
Okay...that’s all
If there are other methods, please give me some advice !
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement circular references between components in Vue.js
There are examples of asynchronous components in Vue
How to solve the maximum call stack error in nodejs
How to implement the blog management platform in Vue SpringBoot
The above is the detailed content of How to clear browser cache in angularJs. For more information, please follow other related articles on the PHP Chinese website!