JavaScript'te önbelleği temizleme

JavaScript ile tarayıcı önbelleğini nasıl temizlerim?

En son JavaScript kodunu konuşlandırdık ancak en son JavaScript kodunu alamıyoruz.

Editoryal Not: Bu soru aşağıdaki yerlerde yarı kopyalanmıştır ve aşağıdaki soruların ilkindeki cevap muhtemelen en iyisidir. Kabul edilen bu cevap artık ideal çözüm değildir.

Tarayıcı, önbelleğe alınmış CSS / JS dosyalarını yeniden yüklemeye nasıl zorlanır?

İstemcileri JavaScript dosyalarını yenilemeye nasıl zorlayabilirim?

Yerel Javascript kaynağı / json verilerini dinamik olarak yeniden yükle

Geçerli sayfayı yeniden yüklemek için window.location.reload (true) öğesini çağırabilirsiniz . Önbelleğe alınmış öğeleri yok sayar ve sayfanın, css, resimler, JavaScript vb. Yeni kopyalarını sunucudan alır. Bu, tüm önbelleği temizlemez, ancak bulunduğunuz sayfa için önbelleği temizleme etkisine sahiptir.

Bununla birlikte, en iyi stratejiniz yolu veya dosya adını diğer çeşitli yanıtlarda belirtildiği gibi versiyonlamaktır. Ayrıca, bkz. Dosya Adlarını Değiştirme:?v=n sürüm oluşturma düzeniniz olarak kullanılmama nedenlerinden dolayı querystring kullanmayın .

Javascript ile önbelleği temizleyemezsiniz. Sık kullanılan bir yol, düzeltme numarasını veya en son güncellenen zaman damgasını dosyaya şu şekilde eklemektir:

myscript.123.js

veya

myscript.js?updated=1234567890

JavaScript dosyasının src'sini değiştirmeyi deneyin? Bundan:

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

Buna:

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

Bu yöntem, tarayıcınızı JS dosyasının yeni bir kopyasını yüklemeye zorlamalıdır.

Her saat veya her hafta önbellekleme dışında, dosya verilerine göre önbellekleme yapabilirsiniz.

Örnek (PHP'de):

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

hatta dosya değiştirme zamanını kullanın:

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

Ayrıca kodu PHP'de her saat gibi yeniden yüklenmeye zorlayabilirsiniz:

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

veya

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

bunu şablonunuzun sonuna ekleyin:

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

bunu kullanmayı dene

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

Buna:

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

İşte son projem için kullandığım bir parçacık.

Denetleyiciden:

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

Görünümden:

<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; ?>">

Yayınlama sürecimiz, mevcut yapının revizyon numarası olan bir dosya oluşturur. Bu, söz konusu dosyayı kodlayan ve önbellek bozucu olarak kullanan URL ile çalışır. Bir başarısızlık olarak, bu dosya yoksa, önbellekleme hala çalışacak şekilde yıl ve hafta numarası kullanılır ve haftada en az bir kez yenilenir.

Ayrıca, bu, geliştirme ortamındayken her sayfa yükü için önbellek bozma sağlar, böylece geliştiriciler herhangi bir kaynak (javascript, css, ajax çağrıları, vb.) İçin önbelleği temizlemek konusunda endişelenmek zorunda kalmazlar.

veya sadece js dosyasını file_get_contets ile sunucuya okuyabilir ve sonra js içeriğini başlığa yankı koyabilirsiniz

Belki "önbelleği temizlemek" olması gerektiği kadar kolay değildir. Tarayıcılarımdaki önbelleği temizlemek yerine , dosyaya "dokunmanın" sunucuda önbelleğe alınan kaynak dosyanın tarihini değiştireceğini (Edge, Chrome ve Firefox'ta test edildi) ve çoğu tarayıcının otomatik olarak en güncel yeni kopyasını indireceğini fark ettim . sunucunuzda ne var (kod, grafikler de herhangi bir multimedya). Programınız çalıştırılmadan önce sunucudaki en güncel komut dosyalarını kopyalamanızı ve "dokunma işlemini yap" çözümünü kullanmanızı öneririm , böylece tüm sorun dosyalarınızın tarihini en güncel tarih ve saate değiştirir, ardından yeni bir kopyasını indirir tarayıcınıza:

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

... programınızın geri kalanı ...

Bu sorunu çözmem biraz zaman aldı (birçok tarayıcı farklı komutlara farklı davranıyor, ancak hepsi dosya saatlerini kontrol ediyor ve farklı tarih ve saat varsa yenilemeyi yapacak olan tarayıcınızda indirdiğiniz kopyayla karşılaştırıyor), sözde doğru yola devam edemez, her zaman başka bir kullanılabilir ve daha iyi bir çözüm vardır. Saygılarımızla ve mutlu kamp.

Yboussard tarafından önerilen kod ile bazı sorunlar vardı. İç j döngüsü işe yaramadı. İşte başarıyla kullandığım değiştirilmiş kod.

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

Eğer php kullanıyorsanız yapabilirsiniz:

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

Cache.delete () yeni krom, firefox ve opera için kullanılabilir.

Lütfen yanlış bilgi vermeyin. Önbellek API'si http önbelleğinden farklı bir önbellek türüdür

Sunucu doğru başlıkları gönderdiğinde HTTP önbelleği tetiklenir , javasvipt ile erişemezsiniz.

Öte yandan önbellek api , istediğiniz zaman tetiklenir, servis çalışanı ile çalışırken faydalıdır, böylece isteği kesebilir ve bu tür bir önbellekten cevaplayabilirsiniz bkz: ilustration 1 ilustration 2 course

Kullanıcılarınızda her zaman yeni bir içeriğe sahip olmak için bu teknikleri kullanabilirsiniz:

1. Location.reload kullanın (true) bu benim için çalışmıyor, bu yüzden tavsiye etmem.
2. Önbelleğe kaydetmek ve isteği servis çalışanıyla kesiştirmek için Önbellek API'sini kullanın , sunucuya önbellek başlıklarını gönderirse , tarayıcı önce HTTP önbelleğinden yanıt verir, ve bulamazsa, ağa gidecektir, böylece eski dosya ve eski dosya ile sonuçlanabilir
3. Stactics dosyalarından URL'yi değiştirin, tavsiyem, dosya içeriğinizdeki değişiklikle adlandırmanız gerekir, md5 kullanıyorum ve sonra dize ve url'ye dönüştürüyorum ve md5 dosyanın içeriği ile değişecek, orada HTTP önbellek başlıklarını yeterince uzun süre gönderebilir

Ben üçüncü birini tavsiye ediyorum görmek

Ayrıca, kodlama / test işlemi sırasında web sayfasının önbelleğe alınmasını önlemek için meta HTML etiketleri ile tarayıcı önbelleğe almayı devre dışı bırakabilirsiniz, işiniz bittiğinde meta etiketleri kaldırabilirsiniz.

(baş bölümünde)

<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"/>

Bunu başa yapıştırdıktan sonra sayfanızı yenileyin ve yeni javascript kodunu da yenileyin.

Bu bağlantı size ihtiyacınız varsa başka seçenekler de sunar http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

ya da böyle bir düğme oluşturabilirsiniz

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

yenilenir ve önbelleğe alınmasını önler, ancak testi bitirinceye kadar sayfanızda olacaktır, sonra çıkarabilirsiniz. Yumruk seçeneği en iyisidir.

Çerçevemi sürümlendirme eğilimindeyim, ardından sürüm numarasını komut dosyasına ve stil yollarına uygularım

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

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

Konsolda kodu yürüttükten sonra tarayıcıyı kapatıp açın.

window.location.reload(true)HTML5 standardı tarafından kullanımdan kaldırılmış görünüyor. Sorgu dizeleri kullanmadan bunu yapmanın bir yolu , standartlaştırılmış gibi görünen Clear-Site-Databaşlığı kullanmaktır .

Tarayıcı önbelleği aynı bağlantıya neden olursa, url'nin rastgele bir sayı sonuna eklemelisiniz. new Date().getTime()farklı bir sayı üretebilir.

Sadece new Date().getTime()bağlantının sonunu çağrı gibi ekleyin

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

Çıktı: https://stackoverflow.com/questions.php?1571737901173