第29篇：angularjs强清除html缓存

╰半橙微兮° 2022-06-03 21:00 159阅读 0赞

浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。

以下是传统的清除浏览器的方法

meta方法

\[html\]  [view plain][]  [copy][view plain]

1.  //不缓存  
2.  <META HTTP-EQUIV="pragma" CONTENT="no-cache">   
3.  <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">   
4.  <META HTTP-EQUIV="expires" CONTENT="0">

清理form的临时缓存

\[html\]  [view plain][]  [copy][view plain]

1.  <body onLoad="javascript:document.yourFormName.reset()">

ajax清除缓存

\[html\]  [view plain][]  [copy][view plain]

1.  $.ajax(\{  
2.       url:'www.haorooms.com',  
3.       dataType:'json',  
4.       data:\{\},  
5.       cache:false,   
6.       ifModified :true ,  
7.    
8.       success:function(response)\{  
9.           //操作  
10.      \}  
11.      async:false  
12.   \});

用随机数，随机数也是避免缓存的一种很不错的方法！

\[html\]  [view plain][]  [copy][view plain]

1.  URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了

用随机时间，和随机数一样。

\[html\]  [view plain][]  [copy][view plain]

1.  在 URL 参数后加上 "?timestamp=" + new Date().getTime();

用php后端清理

\[html\]  [view plain][]  [copy][view plain]

1.  在服务端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)

下面介绍关于angularJs项目中清除浏览器的方法，当然以上传统的方法也是可以适用的，但对于angularJs来说还需添加以下几项：  
  
一、清除模板缓存

\[javascript\]  [view plain][]  [copy][view plain]

1.  .run(function($rootScope, $templateCache) \{    
2.              $rootScope.$on('$routeChangeStart', function(event, next, current) \{    
3.                  if (typeof(current) !== 'undefined')\{    
4.                      $templateCache.remove(current.templateUrl);    
5.                  \}    
6.              \});    
7.          \});

二、html添加随机参数

\[javascript\]  [view plain][]  [copy][view plain]

1.  .state("content", \{  
2.                 url: "/",  
3.                 views:\{  
4.                     "bodyInfo":\{templateUrl: 'tpls/bodyInfo.html?'\+ +new Date(),  
5.                         controller:'bodyInfoCtrl'\},  
6.                     "header":\{templateUrl: 'tpls/header.html?'\+ +new Date(),  
7.                         controller:'headerCtrl'  
8.                     \},  
9.                     "footer":\{templateUrl: 'tpls/footer.html?'\+ +new Date(),  
10.                        controller:'footerCtrl'  
11.                    \}  
12.                \}  
13.             \})

\[html\]  [view plain][]  [copy][view plain]

1.  <link rel="stylesheet" href="stylesheets/main.css?version=1.0.3">

三、清除route缓存

\[javascript\]  [view plain][]  [copy][view plain]

1.  .config(\['$stateProvider', '$urlRouterProvider','$locationProvider','$httpProvider',function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) \{  
2.  //         $urlRouterProvider.when("", "/home");  
3.              $urlRouterProvider.otherwise('/');  
4.               if (!$httpProvider.defaults.headers.get) \{  
5.                $httpProvider.defaults.headers.get = \{\};  
6.              \}  
7.              $httpProvider.defaults.headers.common\["X-Requested-With"\] = 'XMLHttpRequest';  
8.              $httpProvider.defaults.headers.get\['Cache-Control'\] = 'no-cache';  
9.              $httpProvider.defaults.headers.get\['Pragma'\] = 'no-cache';

[view plain]: http://blog.csdn.net/jimolangyaleng/article/details/76617771#