首页 >web前端 >js教程 >在angularJs中如何实现清除浏览器缓存

在angularJs中如何实现清除浏览器缓存

亚连原创: 2018-06-23 17:31:471987浏览

这篇文章主要介绍了关于angularJs清除浏览器缓存的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

缓存篇

一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。

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

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

meta方法

//不缓存 
<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()">

ajax清除缓存

$.ajax({ 
   url:&#39;www.haorooms.com&#39;, 
   dataType:&#39;json&#39;, 
   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中)

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

一、清除模板缓存

.run(function($rootScope, $templateCache) {  
      $rootScope.$on(&#39;$routeChangeStart&#39;, function(event, next, current) {  
        if (typeof(current) !== &#39;undefined&#39;){  
          $templateCache.remove(current.templateUrl);  
        }  
      });  
    });

二、html添加随机参数

.state("content", { 
        url: "/", 
        views:{ 
          "bodyInfo":{templateUrl: &#39;tpls/bodyInfo.html?&#39;+ +new Date(), 
            controller:&#39;bodyInfoCtrl&#39;}, 
          "header":{templateUrl: &#39;tpls/header.html?&#39;+ +new Date(), 
            controller:&#39;headerCtrl&#39; 
          }, 
          "footer":{templateUrl: &#39;tpls/footer.html?&#39;+ +new Date(), 
            controller:&#39;footerCtrl&#39; 
          } 
        } 
      })

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

三、清除route缓存

.config([&#39;$stateProvider&#39;, &#39;$urlRouterProvider&#39;,&#39;$locationProvider&#39;,&#39;$httpProvider&#39;,function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) { 
//     $urlRouterProvider.when("", "/home"); 
      $urlRouterProvider.otherwise(&#39;/&#39;); 
       if (!$httpProvider.defaults.headers.get) { 
       $httpProvider.defaults.headers.get = {}; 
      } 
      $httpProvider.defaults.headers.common["X-Requested-With"] = &#39;XMLHttpRequest&#39;; 
      $httpProvider.defaults.headers.get[&#39;Cache-Control&#39;] = &#39;no-cache&#39;; 
      $httpProvider.defaults.headers.get[&#39;Pragma&#39;] = &#39;no-cache&#39;;

好了……就这么多了

如果还有其他方法欢迎指点迷津！

上面是我整理给大家的，希望今后会对大家有帮助。

在Vue.js中如何实现组件间循环引用

在Vue中有关于异步组件的示例

在nodejs中如何解决超出最大的调用栈错误

在Vue+SpringBoot中如何实现博客管理平台

以上是在angularJs中如何实现清除浏览器缓存的详细内容。更多信息请关注PHP中文网其他相关文章！

php ajax vue.js html date timestamp math 循环栈 JS 异步

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：在微信小程序中有关tabBar模板用法（详细教程）下一篇：在AngularJs中如何实现禁止模板缓存

查看更多