집 > 기사 > 웹 프론트엔드 > AngleJs에서 브라우저 캐시를 지우는 방법

AngleJs에서 브라우저 캐시를 지우는 방법

亚连원래의: 2018-06-23 17:31:471654검색

이 글에서는 주로AngularJs에서 브라우저 캐시를 지우는 방법을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집기를 따라 살펴보겠습니다.

캐시 장

캐시는 데이터를 투명하게 저장하여 향후 요청을 더 빠르게 처리할 수 있는 구성 요소입니다. 반복적으로 리소스를 획득하면 데이터가 중복되어 시간이 소모될 수 있습니다. 따라서 캐싱은 변동성이 거의 없는 일부 데이터에 적합합니다. 캐시가 처리할 수 있는 요청이 많을수록 전체 시스템 성능이 더 많이 향상될 수 있습니다.

브라우저 캐시는 웹사이트 성능과 브라우저 속도를 향상하고 웹사이트 성능을 향상시킬 수 있기 때문에 가끔 필요할 때가 있습니다. 하지만 캐시로 인해 문제가 발생하고 일부 잘못된 데이터가 나타날 수 있으므로 캐시를 지워야 하는 경우도 있습니다. 예를 들어, 주식 웹사이트는 실시간으로 업데이트됩니다. 이러한 웹사이트는 캐시할 필요가 없습니다. 일부 웹사이트는 거의 업데이트되지 않으므로 캐시를 보유하는 것이 좋습니다.

다음은 브라우저를 지우는 전통적인 방법입니다

메타 방법

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

양식의 임시 캐시를 정리합니다

<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 
 });

난수를 사용하세요. 난수도 역시 캐싱을 피하는 방법 아주 좋은 방법입니다!

Add "?ran=" + Math.random(); //물론 여기에서 실행되는 매개변수는 임의로 선택할 수 있습니다.

난수와 마찬가지로 임의의 시간을 사용합니다.

Add "?timestamp=" + new Date().getTime();

PHP 백엔드를 사용하여 정리

Add header("Cache-Control: no-cache, must -revalidate"); on (예: php)

다음은angularJs 프로젝트에서 브라우저를 지우는 방법을 소개합니다. 물론 위의 전통적인 방법도 적용 가능하지만,angularJs의 경우 다음 항목을 추가해야 합니다.

1 . 템플릿 캐시를 삭제하세요

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

2. 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" >

3. 경로 캐시를 삭제하세요

.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;;

알겠습니다...그렇습니다

다른 방법이 있으면 알려주세요. 조언!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

AngleJs에서 브라우저 캐시를 지우는 방법

관련 기사