Ștergeți memoria cache în JavaScript (Programare, Javascript, Caching)

subramani a intrebat.

Cum se șterge memoria cache a unui browser cu JavaScript?

Am implementat cel mai recent cod JavaScript, dar nu reușim să obținem cel mai recent cod JavaScript.

Notă editorială: Această întrebare este semidocumentată în următoarele locuri, iar răspunsul din prima dintre întrebările următoare este probabil cel mai bun. Acest răspuns acceptat nu mai este soluția ideală.

Cum să forțezi browserul să reîncarce fișierele CSS/JS din memoria cache?

Cum pot forța clienții să reîmprospăteze fișierele JavaScript?

Reîncărcarea dinamică a sursei locale Javascript / datelor json

Comentarii

  • Acest lucru mă derutează: „Am implementat cel mai recent cod javascript, dar nu putem obține cel mai recent cod javascript”  > Por instanceof me.
  • 16

  • Presupun că vă referiți la cum să forțați browserele clienților să utilizeze cea mai recentă versiune de javascript și nu versiunea lor din memoria cache – în acest caz, aveți nevoie de răspunsul lui Greg. Dacă vrei să știi cum să faci asta în propriul browser, este răspunsul lui David Johnstone. –  > Por Benjol.
  • stackoverflow.com/questions/118884/… – –  > Por understack.
  • O abordare obișnuită este de a atașa un ?version=xxx la fișierele legate de JS prin intermediul unui pas de construire. Fiecare construcție nouă va solicita o nouă versiune a fișierului JS. –  > Por Juan Mendes.
  • @JuanMendes Acest lucru nu funcționează întotdeauna. Același pas este sugerat atunci când oamenii au probleme în încercarea de a vedea cel mai recent favicon. Pur și simplu nu este garantat să funcționeze. –  > Por uSeRnAmEhAhAhAhAhAhAhA.
22 răspunsuri
Kevin Hakanson

Puteți suna la window.location.reload(true) pentru a reîncărca pagina curentă. Acesta va ignora orice elemente din cache și va prelua noi copii ale paginii, css, imagini, JavaScript etc. de pe server. Acest lucru nu șterge întreaga memorie cache, dar are ca efect ștergerea memoriei cache pentru pagina pe care vă aflați.

Cu toate acestea, cea mai bună strategie este să faceți o versiune a căii sau a numelui fișierului, așa cum s-a menționat în alte răspunsuri. În plus, consultați Revizuirea numelor de fișiere: nu folosiți querystringul pentru motive pentru a nu utiliza ?v=n ca schemă de versionare.

Comentarii

  • Wow, mulțumesc! Acest lucru funcționează bine și în cazul unui cache de aplicație HTML5 încărcat dintr-un fișier cache.manifest. Aveam un manifest vechi care nu era eliminat din memorie, așa că un browser care îl avea în cache nu afișa fișiere mai noi. Am tastat acest lucru în consola javascript și a funcționat bine. Vă mulțumim! –  > Por JayCrossler.
  • dar revigorând prin schimbarea numelui fișierului… nu va trebui să păstrați toate versiunile anterioare pe loc? altfel veți primi o mulțime de încercări eșuate de la motoarele de căutare și ce nu pentru a citi versiunile mai vechi (sau imaginile cu marcaje / link-uri) –  > Por Rodolfo.
  • cum se face că nu m-am gândit la asta, mulțumesc…  > Por osdamv.
  • Este același lucru ca și click-ul utilizatorului pe butonul de reîmprospătare? –  > Por Sam YC.
  • @Manuel Se va dezactiva doar accesarea paginii din memoria cache a url-ului exact pe care ați apelat location.reload(true). Nu șterge niciodată pagina originală din memoria cache, deoarece doar adaugă o marcă de timp la noua cerere, iar dacă există alte apeluri efectuate în mod asincron de către această pagină, aceste cereri NU vor avea comportamentele de caching dezactivate. De exemplu, dacă reîmprospătați o pagină cu reload(true) care încarcă niște html, iar pagina respectivă are un script care face un al doilea apel ajax pentru a afișa mai mult html pe aceeași pagină, a doua cerere nu va avea cachingul dezactivat. –  > Por J. Schei.
Greg

Nu puteți șterge memoria cache cu javascript.O modalitate obișnuită este de a adăuga numărul de revizuire sau ultima dată de actualizare la fișier, astfel:

myscript.123.js

sau

myscript.js?updated=1234567890

Comentarii

  • Rețineți totuși că multe proxy-uri nu vor stoca în cache un fișier atunci când acesta are un șir de interogare. A se vedea răspunsul lui Kevin Hakanson. –  > Por chiborg.
  • Cum pot șterge memoria cache atunci când întregul HTML a fost pus în memoria cache ? Nu va afecta nici măcar atunci când numărul de versiune este adăugat din cauza HTML-ului memorat în cache.Vă rog să mă ajutați –  > Por Nandakumar.
  • Dacă nu pot șterge un element din memoria cache, atunci de ce nu se șterge MDN spune că pot? Ce îmi scapă? Am încercat ceea ce spune MDN, dar nu am avut noroc. –  > Por Sнаđошƒаӽ.
Barry Gallagher

Încercați să schimbați src-ul fișierului JavaScript? De aici:

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

La aceasta:

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

Această metodă ar trebui să forțeze browserul să încarce o nouă copie a fișierului JS.

Comentarii

  • Ce face n=1? –  > Por KyelJmD.
  • nu face nimic în afară de a fi ceva diferit. ar putea fi ?12345 sau ?Kyle –  > Por Oneezy.
  • Deci și numele fișierului trebuie schimbat? Sau doar calea src care trebuie schimbată? –  > Por Fred A.
  • am primit răspunsul de la tine –  > Por Eliot Alderson.
Alexandre T.

În afară de a face cache la fiecare oră sau la fiecare săptămână, puteți face cache în funcție de datele din fișiere.

Exemplu (în PHP):

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

sau chiar folosiți timpul de modificare a fișierului:

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

Comentarii

  • Pot să verific dacă am înțeles corect?: Cu opțiunea 1, atunci când fișierul se modifică, se modifică hash-ul sumei de control md5, care apoi modifică url-ul. Browserul vede un nou url și inițiază o nouă încărcare a fișierului. Datele get adăugate la url sunt ignorate de server. Dacă așa stau lucrurile, este al naibii de inteligent. –  > Por Colin Brogan.
  • De asemenea, este MD5-ing un fișier întreg procesor intensiv? Mă gândesc să fac acest lucru pentru fiecare fișier css și js, dar nu mi-ar plăcea să văd o lovitură la viteza serverului din această cauză. –  > Por Colin Brogan.
  • Utilizarea unei sume de control este o idee bună, dar trebuie făcută corect. Calcularea acesteia la fiecare solicitare pentru fiecare fișier va afecta semnificativ performanța. Querystring nu este bun nici pentru cache, vezi alte răspunsuri. Utilizarea corectă este de a adăuga o sumă de control (parte din?) sau un număr de versiune la numele fișierului și de a utiliza acest nou nume în locul acestuia (puteți utiliza un script de construcție pentru a face acest lucru în mod automat la implementare). Consultați grunt, rev și usemin. –  > Por Frizi.
Fabien Ménager

Puteți, de asemenea, forța codul să fie reîncărcat la fiecare oră, astfel, în PHP :

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

sau

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

Comentarii

  • bună ziua, ce înseamnă „v” și „token”? –  > Por Sam YC.
  • @GMsoF care este doar un parametru get suplimentar care este folosit (în acest caz) pentru a spune browserului că este un fișier „diferit”. Astfel încât browserul să renunțe la versiunea din memoria cache și să o încarce pe aceasta în schimb. Acest lucru este adesea utilizat cu „data ultimei modificări” a unui fișier. Sper că acest lucru are sens 😉 –  > Por Jelmer.
yboussard

puneți acest lucru la sfârșitul șablonului dumneavoastră :

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

Comentarii

  • vă rugăm să oferiți o explicație cu privire la soluția dumneavoastră –  > Por Gabriel Espinoza.
  • @GabrielEspinoza el reîncarcă fișierele folosind javascript, ceea ce face ca cache-urile să fie actualizate. –  > Por Neo Morina.
  • Când faci o buclă prin torefreshs, schimbați bucla for în for(var j=0;j<torefreshs.length;j++){ –  > Por Souvik Ray.
Daniel

încercați să folosiți acest lucru

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

La aceasta:

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

Justin Johnson

Iată un fragment din ceea ce folosesc pentru cel mai recent proiect al meu.

De la controler:

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

Din vizualizare:

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

Procesul nostru de publicare generează un fișier cu numărul de revizuire al construcției curente. Acest lucru funcționează prin codificarea URL a acelui fișier și utilizarea acestuia ca un cache buster. Ca o soluție de rezervă, dacă acel fișier nu există, se utilizează numărul anului și al săptămânii, astfel încât să funcționeze în continuare memoria cache, iar acesta va fi actualizat cel puțin o dată pe săptămână.

De asemenea, acest lucru asigură o eliminare a memoriei cache pentru fiecare încărcare a paginii în mediul de dezvoltare, astfel încât dezvoltatorii nu trebuie să-și facă griji cu privire la ștergerea memoriei cache pentru orice resursă (javascript, css, apeluri ajax etc.).

albanx

sau puteți citi fișierul js de către server cu file_get_contets și apoi puneți în echo în header conținutul js-ului

Luis H Cabrejo

Poate „curățarea cache-ului” nu este atât de ușor pe cât ar trebui să fie. În loc să șterg memoria cache pe browserele mele, mi-am dat seama că „atingând” fișierul va schimba de fapt data fișierului sursă aflat în memoria cache de pe server (testat pe Edge, Chrome și Firefox) și majoritatea browserelor vor descărca automat cea mai recentă copie proaspătă a ceea ce se află pe serverul dvs. (cod, grafică, orice fel de multimedia). Vă sugerez să copiați doar cele mai actuale scripturi de pe server și să „faceți chestia cu atingerea” soluție înainte ca programul dvs. să ruleze, astfel încât să schimbe data tuturor fișierelor dvs. problematice la o dată și oră cea mai recentă, apoi descarcă o copie proaspătă în browser:

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

…restul programului…

Mi-a luat ceva timp pentru a rezolva această problemă (deoarece multe browsere acționează diferit la diferite comenzi, dar toate verifică ora fișierelor și o compară cu copia descărcată în browser, dacă data și ora sunt diferite, va face reîmprospătarea), Dacă nu puteți merge pe calea presupusă corectă, există întotdeauna o altă soluție utilizabilă și mai bună pentru aceasta. Cele mai bune considerații și camping fericit.

Comentarii

  • Îmi place această abordare, dar poate că o implementez în zona greșită? Știe cineva unde se poate adăuga acest lucru într-o configurație WordPress? Am adăugat-o în fișierul functions.php, cu link-uri directe către fișierele JavaScript și CSS, dar tot a trebuit să fac o reîncărcare pentru ca modificările să fie observate. –  > Por flipflopmedia.
  • Ceea ce trebuie să faceți, este ca în directorul principal html wordpress, să editați index.php pentru a apela sau executa comanda Touch() la fișierele care trebuie reîmprospătate și descărcate. Eu am avut probleme cu poze mici și fișiere js care au rămas blocate în cache. Am încercat cele mai multe metode descrise pentru a elibera din memorie, dar cea mai bună metodă este să încărcați un curent proaspăt și corect. Puteți realiza acest lucru făcând doar „Touch Thing”, deoarece nu modifică nimic în fișier, ci doar actualizează data și ora curentă, astfel încât să păcălească browserul să creadă că este o altă versiune a fișierului și că problema este rezolvată. Funcționează pe majoritatea browserelor –  > Por Luis H Cabrejo.
Bryan

Am avut unele probleme cu codul sugerat de yboussard. Bucla j interioară nu a funcționat. Iată codul modificat pe care îl folosesc cu succes.

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

utilizator3573488

Dacă folosiți php puteți face:

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

Comentarii

  • Nu numai că această întrebare a fost pusă acum patru ani, dar a avut și un răspuns mai bun, chiar dacă nu a fost acceptat. – user308323
  • De asemenea, această metodă ar reîncărca fișierul de fiecare dată, indiferent de numărul real de revizuire sau de modificările aduse fișierului, ceea ce ar dezactiva efectiv memoria cache cu totul. –  > Por Antti29.
John Balvin Arias

Vă rugăm să nu dați informații incorecte.Cache api este un tip de cache diferit de cache http

Cache HTTP este declanșat atunci când serverul trimite codul corect corectepe care nu le puteți accesa cu javasvipt.

Cache api pe de altă parte, este declanșată atunci când doriți, este utilă atunci când lucrați cu lucrător de servicii astfel încât să puteți intersecta cererea și să răspundeți la ea din acest tip de cache:ilustrația 1 ilustrația 2 curs

Puteți utiliza aceste tehnici pentru a avea întotdeauna un conținut proaspăt pentru utilizatorii dumneavoastră:

  1. Utilizați location.reload(true) acest lucru nu funcționează pentru mine, așa că nu l-aș recomanda.
  2. Utilizați Cache api pentru a salva în memoria cache și pentru a intersecta cererea cu service workeraveți grijă la acest lucru, deoarece dacă serverul a trimis cererea de căutare, trebuie să aveți grijă. anteturile cache pentru fișierele pe care doriți să le reîmprospătați, browserul va răspunde mai întâi din memoria cache HTTP, iar dacă nu le găsește, atunci se va adresa rețelei, astfel încât s-ar putea să vă treziți cu un fișier vechi.
  3. Schimbați url-ul din fișierele statice, recomandarea mea este să îl numiți cu schimbarea conținutului fișierelor, eu folosesc md5 și apoi convertiți-l în șir de caractere și în url prietenos, iar md5 se va modifica în funcție de conținutul fișierului, astfel încât să puteți trimite liber antetele cache HTTP suficient de mult timp.

Aș recomanda cea de-a treia variantă consultați

Jay Shah

Cache.delete() poate fi folosit pentru noile chrome, firefox și opera.

Comentarii

  • Nu este aceasta doar o parte din API-ul Service Workers? –  > Por BanksySan.
  • @BanksySan din documentele MDN: You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec. –  > Por Madbreaks.
alfmonc

Puteți, de asemenea, dezactiva memoria cache a browserului cu tag-uri meta HTML, doar puneți tag-uri html în secțiunea head pentru a evita ca pagina web să fie pusă în memoria cache în timp ce codificați/testați, iar când ați terminat puteți elimina tag-urile meta.

(în secțiunea head)

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

Reîncărcați pagina după ce ați lipit acest lucru în head și ar trebui să reîmprospătați și noul cod javascript.

Acest link vă va oferi și alte opțiuni, dacă aveți nevoie de elehttp://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

sau puteți crea pur și simplu un buton ca acesta

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

se reîmprospătează și evită cachingul, dar va fi acolo pe pagina dvs. până când terminați testarea, apoi îl puteți scoate. Prima opțiune este cea mai bună cred eu.

Mygod

window.location.reload(true) se pare că a fost eliminat de standardul HTML5. O modalitate de a face acest lucru fără a utiliza șiruri de interogare este de a folosi opțiunea Clear-Site-Data header, care pare a fi fi standardizat.

SpliFF

Am tendința de a versiunea cadrul meu de lucru, apoi se aplică numărul de versiune la script și căi de stil

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

Comentarii

  • OP nu a menționat Coldfusion. –  > Por marctrem.
  • @VijayDev 404 pentru linkul tău –  > Por smarber.
brotatochip

Am găsit recent o soluție la această problemă. În cazul meu, încercam să actualizez un element html folosind javascript; folosisem XHR pentru a actualiza textul pe baza datelor preluate dintr-o cerere GET. Deși solicitarea XHR se întâmpla frecvent, datele HTML stocate în memoria cache rămâneau frustrant de neschimbate.

Recent, am descoperit o metodă de distrugere a memoriei cache în fișierul fetch api. Api-ul fetch înlocuiește XHR și este super simplu de utilizat. Iată un exemplu:

        async function updateHTMLElement(t) {
            let res = await fetch(url, {cache: "no-store"});
            if(res.ok){
                let myTxt = await res.text();
                document.getElementById('myElement').innerHTML = myTxt;
            }
        }

Observați că {cache: "no-store"} argument? Acest lucru determină browserul să spargă memoria cache pentru acel element, astfel încât noile date să fie încărcate în mod corespunzător. Doamne, a fost o mană cerească pentru mine. Sper că vă este de ajutor și vouă.

În mod tangențial, pentru a distruge memoria cache pentru o imagine care este actualizată pe partea serverului, dar care păstrează aceeași valoare src cea mai simplă și cea mai veche metodă este de a folosi pur și simplu Date.now()și să adăugați acest număr ca o variabilă url în cadrul fișierului src pentru imaginea respectivă. Acest lucru funcționează în mod fiabil pentru imagini, dar nu și pentru elementele HTML. Dar între aceste două tehnici, puteți actualiza orice informație de care aveți nevoie acum 🙂

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

închideți și deschideți browserul după ce ați executat codul în consolă.

Comentarii

  • Câteva explicații vă rog, ce înseamnă „call” în codul de mai sus? –  > Por Anand Rockzz.
  • @AnandRockzz nu este posibil, cache api este doar un nou tip de cache care poate fi gestionat cu javascipt, astfel încât, pentru a șterge ceva de acolo, trebuie să fi salvat ceva înainte vezi developer.mozilla.org/en-US/docs/Web/API/Cache –  > Por John Balvin Arias.
EMAM HASAN

Pentru că browser cache același link, ar trebui să adăugați un număr aleatoriu la sfârșitul url-ului.
new Date().getTime()
generați un număr diferit.

Doar adăugați new Date().getTime() sfârșitul linkului ca și cum ar fi

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

Ieșire: https://stackoverflow.com/questions.php?1571737901173

Comentarii

  • Bine ați venit la SO! Răspunsul dumneavoastră este neclar. Vă rugăm să îl modificați. Acest tip de răspunsuri, bazate pe link, ar trebui comentate în cazul în care link-ul dispare. –  > Por David García Bodego.
raul7

Am rezolvat această problemă folosindETag

Etag-urile sunt similare cu amprentele digitale, iar dacă resursa de la o anumită adresă URL se schimbă, trebuie generată o nouă valoare Etag. O comparație a acestora poate determina dacă două reprezentări ale unei resurse sunt identice.

Pranit Kharche

Ref: https://developer.mozilla.org/en-US/docs/Web/API/Cache/delete

Cache.delete()

Metoda

Sintaxă:

cache.delete(request, {options}).then(function(found) {
  // your cache entry has been deleted if found
});