Maison >interface Web >js tutoriel >Comment vider le cache du navigateur dans AngularJs

Comment vider le cache du navigateur dans AngularJs

亚连original: 2018-06-23 17:31:471739parcourir

Cet article présente principalement la méthode de vidage du cache du navigateur dans angulaireJs. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Chapitre sur le cache

Un cache est un composant qui peut stocker des données de manière transparente afin de pouvoir répondre aux demandes plus rapidement à l'avenir. L'obtention répétée de ressources peut entraîner une duplication des données et prendre du temps. Par conséquent, la mise en cache convient à certaines données peu variables. Plus le cache peut traiter de requêtes, plus les performances globales du système peuvent être améliorées.

Cache du navigateur, nous en avons parfois besoin, car il peut améliorer les performances du site Web et la vitesse du navigateur, ainsi que les performances du site Web. Mais parfois, nous devons vider le cache, car le cache peut causer des problèmes et des données erronées peuvent apparaître. Par exemple, les sites Web boursiers sont mis à jour en temps réel. Ces sites Web n'ont pas besoin d'être mis en cache. Certains sites Web sont rarement mis à jour, il est donc préférable d'avoir un cache.

Ce qui suit est la méthode traditionnelle pour vider le navigateur

méthode méta

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

Vider le cache temporaire du formulaire

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

Ajax vider le cache

$.ajax({ 
   url:&#39;www.haorooms.com&#39;, 
   dataType:&#39;json&#39;, 
   data:{}, 
   cache:false,  
   ifModified :true , 
 
   success:function(response){ 
     //操作 
   } 
   async:false 
 });

Utiliser des nombres aléatoires Les nombres aléatoires sont également un très bon moyen d'éviter la mise en cache !

Ajouter "?ran=" + Math.random(); //Bien sûr, le paramètre exécuté ici peut être choisi arbitrairement

Utiliser une heure aléatoire, la même qu'un nombre aléatoire.

Ajoutez "?timestamp=" + new Date().getTime(); après le paramètre URL ;

Utilisez le backend php pour nettoyer

Ajouter un en-tête("Cache-Control: no-cache, must-revalidate"); et ainsi de suite côté serveur (comme en php)

Ce qui suit est une introduction à la méthode de nettoyage du navigateur. dans le projet angulaireJs Bien sûr, ce qui précède est la méthode traditionnelle. La méthode est également applicable, mais pour angulaireJs, les éléments suivants doivent être ajoutés :

1. Vider le cache du modèle<.>

.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 Ajouter des paramètres aléatoires

.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. 🎜>D'accord...c'est tout S'il existe d'autres méthodes, n'hésitez pas à nous donner des conseils !

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter des références circulaires entre les composants dans Vue.js

Il existe des exemples de composants asynchrones dans Vue

Comment résoudre l'erreur maximale de pile d'appels dans nodejs

Comment implémenter une plateforme de gestion de blog dans Vue+SpringBoot

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de l'utilisation du modèle tabBar dans le mini-programme WeChat (tutoriel détaillé)Article suivant：À propos de l'utilisation du modèle tabBar dans le mini-programme WeChat (tutoriel détaillé)

Articles Liés

Voir plus