जावास्क्रिप्ट में कैश साफ़ करें


179

मैं जावास्क्रिप्ट के साथ एक ब्राउज़र कैश कैसे साफ़ करूँ?

हमने नवीनतम जावास्क्रिप्ट कोड तैनात किया है लेकिन हम नवीनतम जावास्क्रिप्ट कोड प्राप्त करने में असमर्थ हैं।

संपादकीय नोट: यह प्रश्न निम्नलिखित स्थानों पर अर्द्ध-डुप्लिकेट है, और निम्नलिखित प्रश्नों में से पहला उत्तर संभवतः सबसे अच्छा है। यह स्वीकृत उत्तर अब आदर्श समाधान नहीं है।

कैश की गई CSS / JS फ़ाइलों को पुनः लोड करने के लिए ब्राउज़र को कैसे बाध्य करें?

मैं जावास्क्रिप्ट फ़ाइलों को ताज़ा करने के लिए ग्राहकों को कैसे मजबूर कर सकता हूं?

स्थानीय जावास्क्रिप्ट स्रोत / json डेटा को गतिशील रूप से पुनः लोड करें


5
यह मुझे भ्रमित करता है: "हमने नवीनतम जावास्क्रिप्ट कोड तैनात किया है लेकिन हम नवीनतम जावास्क्रिप्ट कोड प्राप्त करने में असमर्थ हैं"
उदाहरण के लिए मुझे

14
मुझे लगता है कि आप का मतलब है, कैसे ग्राहक ब्राउज़रों को अपने नवीनतम संस्करण का उपयोग करने के लिए बाध्य करना है और उनके कैश्ड संस्करण का उपयोग नहीं करना चाहिए - उस स्थिति में आपको ग्रेग के उत्तर की आवश्यकता है। यदि आप यह जानना चाहते हैं कि इसे अपने ब्राउज़र में कैसे करना है, तो यह डेविड जॉनस्टोन का जवाब है।
बेंजोल


4
एक सामान्य दृष्टिकोण ?version=xxxएक बिल्ड कदम के माध्यम से अपने जेएस से जुड़ी फाइलों को संलग्न करना है। हर नया बिल्ड JS फ़ाइल के नए संस्करण का अनुरोध करेगा।
जुआन मेंडेस

1
@JuanMendes यह हमेशा काम नहीं करता है। यह वही कदम सुझाया गया है जब लोगों के पास नवीनतम फ़ेविकॉन को देखने की कोशिश करने वाले मुद्दे हैं। यह सिर्फ काम करने की गारंटी नहीं है।
uSeRnAmEhAhAhAhAhAhAA

जवाबों:


202

आप window.location.reload (सच) कह सकते हैंवर्तमान पृष्ठ को पुनः लोड करने के लिए । यह किसी भी कैश्ड आइटम को नजरअंदाज करेगा और सर्वर से पेज, सीएसएस, इमेज, जावास्क्रिप्ट आदि की नई प्रतियां प्राप्त करेगा। यह पूरे कैश को साफ नहीं करता है, लेकिन आपके द्वारा जिस पृष्ठ पर है, उसके लिए कैश को साफ़ करने का प्रभाव पड़ता है।

हालांकि, आपकी सबसे अच्छी रणनीति पथ या फ़ाइलनाम का संस्करण है जैसा कि विभिन्न अन्य उत्तरों में वर्णित है। इसके अलावा, रिवीलिंग फाइलनेम देखें :?v=n अपने वर्जनिंग स्कीम के रूप में उपयोग न करने के कारणों के लिए क्वेरिस्ट्रिंग का उपयोग न करें


6
वाह धन्यवाद! यह एक HTML5 एप्लिकेशन कैश के लिए अच्छी तरह से कैशे से भरी हुई है। मेरे पास एक पुराना प्रकटन था जिसे मेमोरी से हटाया नहीं जा रहा था, इसलिए एक ब्राउज़र जो इसे कैश किया गया था वह नई फाइलें नहीं दिखाएगा। मैंने इसे जावास्क्रिप्ट कंसोल में टाइप किया, और ठीक काम किया। धन्यवाद!
JayCrossler 14

2
लेकिन फ़ाइल नाम बदलने से पता चलता है ... क्या आपके पास सभी पिछले संस्करण नहीं रहेंगे? अन्यथा आपको खोज इंजन से बहुत सारे असफल प्रयास मिलेंगे और पुराने संस्करणों (या बुकमार्क / लिंक की गई छवियों) को पढ़ने के लिए क्या नहीं
रोडोल्फो

1
यह कैसे है कि मैं उस में नहीं सोचा था, आपको टैंक
osdamv

1
क्या यह वही है जैसे उपयोगकर्ता ताज़ा बटन पर क्लिक करता है?
GMsoF

2
@ मैन्यूल यह केवल उसी यूआरएल के कैश से पेज को एक्सेस करने में अक्षम करेगा जिसे आपने लोकेशन कहा था। लोड (सही) पर। यह कैश से मूल पृष्ठ को कभी भी साफ़ नहीं करता है क्योंकि यह बस नए अनुरोध के लिए एक समय टिकट लगाता है, और अगर इस पृष्ठ द्वारा अतुल्यकालिक रूप से किए गए अन्य कॉल हैं, तो उन अनुरोधों में उनके कैशिंग व्यवहार अक्षम नहीं होंगे। उदाहरण के लिए। यदि आप किसी पृष्ठ को पुनः लोड (सत्य) के साथ रीफ़्रेश करते हैं, जो कुछ html को लोड करता है, और उस पृष्ठ में एक स्क्रिप्ट होती है, जो उसी पृष्ठ पर प्रदर्शित करने के लिए अधिक html के लिए दूसरा ajax कॉल करती है, तो दूसरे अनुरोध में इसकी कैशिंग अक्षम नहीं होगी।
जे। शाही

114

आप जावास्क्रिप्ट के साथ कैश को साफ़ नहीं कर सकते। एक सामान्य तरीका यह है कि फाइल में संशोधन संख्या या अंतिम अद्यतन टाइमस्टैम्प को इस तरह जोड़ा जाए:

myscript.123.js

या

myscript.js?updated=1234567890


9
ध्यान दें कि जब क्वेरी स्ट्रिंग होती है, तो कई प्रॉक्सी फ़ाइल को कैश नहीं करेंगी। देखें केविन हेकसन का जवाब
चिबॉर्ग

4
जब पूरा HTML कैश हो चुका हो, तो मैं कैशे कैसे साफ़ कर सकता हूँ? कैश किए गए HTML के कारण वर्जन नंबर जुड़ने पर भी यह प्रभावित नहीं होगा। कृपया मदद करें
नंदकुमार

यदि मैं कैश आइटम को साफ़ नहीं कर सकता, तो MDN यह क्यों कहता है कि मैं कर सकता हूँ? मैं क्या खो रहा हूँ? मैंने कोशिश की कि एमडीएन क्या कहता है लेकिन भाग्य नहीं।
Sain:04ошƒаӽ

41

जावास्क्रिप्ट फ़ाइल के src को बदलने का प्रयास करें? इस से:

<script language="JavaScript" src="js/myscript.js"></script>

इसके लिए:

<script language="JavaScript" src="js/myscript.js?n=1"></script>

इस विधि को आपके ब्राउज़र को JS फ़ाइल की नई प्रतिलिपि लोड करने के लिए बाध्य करना चाहिए।


N = 1 क्या करता है?
KyelJmD

यह कुछ अलग करने के अलावा कुछ नहीं करता है। यह हो सकता है? 12345 या? काइल
Oneezy

तो फ़ाइल का नाम भी बदलना होगा? या सिर्फ src पथ जिसे बदलने की आवश्यकता है?
फ्रेड ए

20

हर घंटे या हर हफ्ते कैशिंग के अलावा, आप फ़ाइल डेटा के अनुसार कैश कर सकते हैं।

उदाहरण (PHP में):

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

या यहां तक ​​कि फ़ाइल संशोधन समय का उपयोग करें:

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>

3
क्या मैं यह सत्यापित कर सकता हूं कि मैं इसे सही ढंग से समझता हूं ?: विकल्प 1 के साथ, जब फाइल बदलती है, तो md5 चेकसम हैश बदल जाता है, जो फिर url को बदल देता है। ब्राउज़र एक नया url देखता है और फ़ाइल का एक नया लोड आरंभ करता है। Url में संलग्न डेटा को सर्वर द्वारा अनदेखा किया जाता है। अगर ऐसा है, तो बहुत बुरा लगता है।
कॉलिन ब्रोगन

1
इसके अलावा, MD5-ing एक संपूर्ण फ़ाइल प्रोसेसर गहन है? मैं हमेशा css और js फ़ाइल के लिए ऐसा करने पर विचार कर रहा हूं, लेकिन मुझे इसके कारण सर्वर की गति पर एक हिट देखने से नफरत होगी।
कॉलिन ब्रोगन

2
चेकसम का उपयोग करना एक अच्छा विचार है, लेकिन इसे सही किया जाना चाहिए। हर फ़ाइल के लिए हर अनुरोध की गणना करना आपके प्रदर्शन को महत्वपूर्ण रूप से प्रभावित करेगा। कैसरिंगिंग कैशिंग के लिए भी अच्छा नहीं है, अन्य उत्तर देखें। सही उपयोग फाइलनाम के लिए एक चेकसम (का हिस्सा?) या संस्करण संख्या को जोड़ना है और इसके बजाय इस नए नाम का उपयोग करना है (आप इसे पोस्ट करने के लिए स्वचालित रूप से करने के लिए बिल्ड स्क्रिप्ट का उपयोग कर सकते हैं)। देखें घुरघुराना , राजस्व और usemin
फ्रिजी सेप

10

आप हर घंटे कोड को फिर से लोड करने के लिए मजबूर कर सकते हैं, इस तरह, PHP में:

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

या

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>

1
नमस्ते, "v" और "टोकन" का क्या अर्थ है?
GMsoF

4
@GMsoF जो कि केवल एक अतिरिक्त प्राप्त पैरामीटर है जिसका उपयोग (इस मामले में) ब्राउज़र को यह बताने के लिए किया जाता है कि यह "भिन्न" फ़ाइल है। ताकि ब्राउज़र कैश्ड संस्करण को छोड़ देगा और इसके बजाय इसे लोड करेगा। यह अक्सर एक फ़ाइल की "अंतिम संशोधित तिथि" के साथ प्रयोग किया जाता है। मुझे आशा है कि यह समझ में आता है; ;-)
Jelmer

6

इसे अपने टेम्पलेट के अंत में रखें:

var scripts =  document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){ 
   for(var j=0;j<torefreshs;j++){ 
      if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
        new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
        scripts[i].src = new_src; // change src in order to refresh js
      } 
   }
}

1
कृपया अपने समाधान पर कुछ स्पष्टीकरण प्रदान करें
गेब्रियल एस्पिनोजा

@GabrielEspinoza वह जावास्क्रिप्ट का उपयोग करके फ़ाइलों को फिर से लोड करता है, जिससे कैश को अपडेट किया जाता है।
नियो मोरिना

6

यह प्रयोग करके देखें

 <script language="JavaScript" src="js/myscript.js"></script>

इसके लिए:

 <script language="JavaScript" src="js/myscript.js?n=1"></script>

5

यहाँ मैं अपने नवीनतम प्रोजेक्ट के लिए जो उपयोग कर रहा हूं उसका एक स्निपेट है।

नियंत्रक से:

if ( IS_DEV ) {
    $this->view->cacheBust = microtime(true);
} else {
    $this->view->cacheBust = file_exists($versionFile) 
        // The version file exists, encode it
        ? urlencode( file_get_contents($versionFile) )
        // Use today's year and week number to still have caching and busting 
        : date("YW");
}

दृश्य से:

<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">

हमारी प्रकाशन प्रक्रिया वर्तमान बिल्ड के संशोधन संख्या के साथ एक फ़ाइल उत्पन्न करती है। यह उस फ़ाइल को URL एन्कोडिंग द्वारा और कैश बस्टर के रूप में उपयोग करके काम करता है। फेल-ओवर के रूप में, यदि वह फ़ाइल मौजूद नहीं है, तो वर्ष और सप्ताह की संख्या का उपयोग किया जाता है ताकि कैशिंग अभी भी काम करता है, और इसे सप्ताह में कम से कम एक बार ताज़ा किया जाएगा।

इसके अलावा, यह विकास के माहौल में रहते हुए हर पृष्ठ लोड के लिए कैश बस्टिंग प्रदान करता है ताकि डेवलपर्स को किसी भी संसाधन (जावास्क्रिप्ट, सीएसएस, अजाक्स कॉल, आदि) के लिए कैश को साफ़ करने से परेशान न होना पड़े।


5

या आप बस फ़ाइल को सर्वर द्वारा file_get_contets के साथ पढ़ सकते हैं और फिर हेडर में js सामग्री डाल सकते हैं।


4

शायद "कैश को साफ़ करना" उतना आसान नहीं है जितना इसे होना चाहिए। अपने ब्राउज़रों पर कैश साफ़ करने के बजाय, मुझे एहसास हुआ कि फ़ाइल को "छूने" से सर्वर पर कैश्ड स्रोत फ़ाइल की तारीख बदल जाएगी (एज, क्रोम और फ़ायरफ़ॉक्स पर परीक्षण) और अधिकांश ब्राउज़र स्वचालित रूप से सबसे वर्तमान ताज़ा कॉपी डाउनलोड कर लेंगे आपके सर्वर पर कोड (कोड, ग्राफिक्स किसी भी मल्टीमीडिया)। मेरा सुझाव है कि आप सर्वर पर सबसे वर्तमान स्क्रिप्ट की प्रतिलिपि बनाएँ और अपने प्रोग्राम को चलाने से पहले "टच द चीज़" समाधान करें, इसलिए यह आपकी सभी समस्या फ़ाइलों की तिथि को एक वर्तमान तिथि और समय में बदल देगा, फिर यह एक नई प्रतिलिपि डाउनलोड करता है अपने ब्राउज़र पर:

<?php
    touch('/www/control/file1.js');
    touch('/www/control/file2.js');
    touch('/www/control/file2.js');
?>

... आपके बाकी कार्यक्रम ...

इस समस्या को हल करने में मुझे कुछ समय लगा (क्योंकि कई ब्राउज़र अलग-अलग कमांड के लिए अलग-अलग कार्य करते हैं, लेकिन वे सभी फ़ाइलों की समय-समय पर जाँच करते हैं और आपके ब्राउज़र में आपकी डाउनलोड की गई कॉपी की तुलना करते हैं, अगर अलग-अलग तारीख और समय, ताज़ा करेंगे), यदि आप माना जाता है कि सही तरीके से नहीं जा सकता, वहाँ हमेशा एक और प्रयोग करने योग्य और बेहतर समाधान है। सर्वश्रेष्ठ सादर और खुश शिविर।


1
मुझे यह दृष्टिकोण पसंद है, लेकिन शायद मैं इसे गलत क्षेत्र में लागू कर रहा हूं? क्या किसी को पता है कि इसे वर्डप्रेस सेटअप में कहां जोड़ना है? मैंने इसे जावास्क्रिप्ट और सीएसएस फाइलों के सीधे लिंक के साथ फंक्शन्स.php फाइल में जोड़ दिया, लेकिन मुझे अभी भी बदलावों पर ध्यान देने के लिए कड़ी मेहनत करनी पड़ी।
फ्लिपफ्लोपमीडिया

1
आपको जो करने की आवश्यकता है, वह आपके मुख्य HTML वर्डप्रेस डायरेक्टरी में है, फाइलों को टच या डाउनलोड करने के लिए अपने index.php को टच () कमांड को संपादित या निष्पादित करने के लिए संपादित करें। मुझे छोटी पिक्स और js फ़ाइलों के साथ समस्या थी जो कैश में फंस गई। मैंने मेमोरी से रिलीज करने के लिए वर्णित अधिकांश तरीकों की कोशिश की, लेकिन सबसे अच्छा तरीका एक ताजा सही लोड करना है। आप इसे "टच थिंग" कर सकते हैं, क्योंकि यह फाइल पर कुछ भी संशोधित नहीं करता है, बस वर्तमान समय और तारीख को अपडेट करता है ताकि आपके ब्राउज़र को फाइल के किसी अन्य संस्करण और समस्या के बारे में सोचने के लिए बेवकूफ बनाया जा सके। अधिकांश ब्राउज़रों पर काम करता है
लुइस एच कैबेरो

3

मुझे yboussard द्वारा सुझाए गए कोड से कुछ परेशानी थी। भीतर का लूप काम नहीं आया। यहां संशोधित कोड है जो मैं सफलता के साथ उपयोग करता हूं।

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}

3

यदि आप php का उपयोग कर रहे हैं तो कर सकते हैं:

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>

6
इतना ही नहीं चार साल पहले पूछे गए इस सवाल का भी बेहतर जवाब था, भले ही इसे स्वीकार न किया गया हो।

4
इसके अलावा, यह विधि वास्तविक संशोधन संख्या या फ़ाइल में किए गए परिवर्तनों की परवाह किए बिना हर बार फ़ाइल को फिर से डाउनलोड करेगी, जो प्रभावी रूप से कैशिंग को पूरी तरह से अक्षम कर देगी।
एंटिटी २

2

Cache.delete () का इस्तेमाल नए क्रोम, फायरफॉक्स और ओपेरा के लिए किया जा सकता है।


क्या यह सर्विस वर्कर्स एपीआई का हिस्सा नहीं है?
बैंकिंसन

एमडीबी डॉक्स से @BanksySan:You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.
मैडब्रेक्स

2

कृपया गलत जानकारी न दें। Cache Api http कैश से भिन्न प्रकार का कैश है

HTTP कैश तब निकाल दिया जाता है जब सर्वर सही हेडर भेजता है , आप javasvipt के साथ एक्सेस नहीं कर सकते।

दूसरे हाथ में कैची आपी को निकाल दिया जाता है जब आप चाहते हैं, यह सेवा कार्यकर्ता के साथ काम करते समय उपयोगी होता है ताकि आप इस प्रकार के कैश से अनुरोध को प्रतिच्छेद कर सकें और इसका उत्तर दे सकें: ilustration 1 ilustration 2 कोर्स

आप अपने उपयोगकर्ताओं पर हमेशा एक ताज़ा सामग्री रखने के लिए इन तकनीकों का उपयोग कर सकते हैं:

  1. स्थान का उपयोग करें। सही (सही) यह मेरे लिए काम नहीं करता है, इसलिए मैं इसे दोबारा नहीं लिखूंगा।
  2. उपयोग कैश में सहेजने और सेवा कार्यकर्ता के साथ अनुरोध को प्रतिच्छेद करने के लिए कैश एफ़आई का , इस के साथ सावधानी बरतें क्योंकि यदि सर्वर ने कैश हेडर भेजा है उन फ़ाइलों के लिए आप रिफ्रेश करना चाहते हैं, तो ब्राउज़र पहले HTTP कैश से उत्तर देगा, और यदि यह नहीं मिलता है, तो यह नेटवर्क पर जाएगा, इसलिए आप पुरानी फ़ाइल के साथ समाप्त हो सकते हैं
  3. आप से stlics फ़ाइलों को url बदलें, मेरा पुनर्संयोजन है कि आप इसे अपनी फ़ाइलों की सामग्री के परिवर्तन के साथ नाम दें, मैं md5 का उपयोग करता हूं और फिर इसे स्ट्रिंग और url के अनुकूल में परिवर्तित करता हूं , और md5 फ़ाइल की सामग्री के साथ बदल जाएगा, वहां आप HTTP कैश हेडर को स्वतंत्र रूप से पर्याप्त रूप से भेज सकते हैं

मैं तीसरे को फिर से देखूंगा


2

आप मेटा HTML टैग के साथ ब्राउज़र कैशिंग को भी अक्षम कर सकते हैं बस कोड को / परीक्षण करते समय वेब पेज से बचने के लिए हेड सेक्शन में html टैग लगाएं और जब आपका काम हो जाए तो आप मेटा टैग को हटा सकते हैं।

(प्रमुख अनुभाग में)

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/>

सिर में इसे चिपकाने के बाद अपने पृष्ठ को ताज़ा करें और नए जावास्क्रिप्ट कोड को भी ताज़ा करें।

यदि आपको उनकी आवश्यकता है तो यह लिंक आपको अन्य विकल्प देगा http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

या आप बस ऐसा बटन बना सकते हैं

<button type="button" onclick="location.reload(true)">Refresh</button>

यह ताज़ा हो जाता है और कैशिंग से बच जाता है लेकिन यह आपके पेज पर तब तक रहेगा जब तक आप परीक्षण समाप्त नहीं कर लेते, तब तक आप इसे बंद कर सकते हैं। मुट्ठी विकल्प सबसे अच्छी बात है।


1

मैं अपने ढांचे को संस्करणित करता हूं फिर संस्करण संख्या को स्क्रिप्ट और शैली पथों पर लागू करता हूं

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>

3
ओपी ने कोल्डफ्यूज़न का उल्लेख नहीं किया।
marctrem

@VijayDev 404 अपने लिंक के लिए
स्मार्बर

1
window.parent.caches.delete("call")

कंसोल में कोड निष्पादित करने के बाद ब्राउज़र को बंद करें और खोलें।


1
कुछ स्पष्टीकरण कृपया, उपरोक्त कोड में "कॉल" क्या है?
आनंद रॉकज़

@AnandRockzz यह संभव नहीं है, कैश एपीआई बस एक नए प्रकार का कैश है जिसे javascipt के साथ प्रबंधित किया जा सकता है, इसलिए वहां से कुछ हटाने के लिए, आपने डेवलपर.mozilla.org/en.us/docs/ को देखने से पहले इसे सहेज लिया है। वेब / एपीआई / कैश
जॉन बल्विन एरिस


0

ब्राउज़र लिंक समान लिंक करें, आपको url का एक यादृच्छिक संख्या अंत जोड़ना चाहिए। new Date().getTime()एक अलग संख्या उत्पन्न करें।

बस new Date().getTime()कॉल के रूप में लिंक का अंत जोड़ें

'https://stackoverflow.com/questions.php?' + new Date().getTime()

आउटपुट: https://stackoverflow.com/questions.php?1571737901173


एसओ में आपका स्वागत है! आपका उत्तर अस्पष्ट है। कृपया इसे संपादित करें। इस तरह के जवाब, लिंक पर आधारित होने पर, लिंक गायब होने की स्थिति में ही टिप्पणी की जानी चाहिए।
डेविड गार्सिया बोदगो
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.