Tänk dig att du har ska fixa bildeditering på sidan du utvecklar. Tänk att du vill att användaren ska kunna förändra små delar av bilden i webbläsaren och för att få det att gå så smidigt som möjligt så vill du uppdatera bilden utan att webbläsaren laddar om.

Problem: Webbläsarens cache sparar bilden och hämtar den gamla, det går tyvärr inte ens att lita på no-cache/no-store meta-taggarna.

Lösningen: Uppdatera bilden med en query-sträng.

Tänk dig att du har följande HTML:

[code lang="html"]<div>
<img src="bild.jpg" alt="" title="" id="image" />
<input type="button" value="update" id="update" />
</div>

Du vill nu att bilden ska uppdateras så fort någon trycker på knappen. För enkelhetens skull så använder vi jQuery.

[code lang="javascript"]
$('#update').click( function () {
$('#image').attr('src', 'bild.jpg');
});

Javascriptkoden ovan ska enligt reglerna byta ut bild.jpg mot bild.jpg, det vill säga uppdatera bilden från servern igen. Det är vid detta momentet cache-funktionen spökar.

Vad vi gör då är att vi lägger till en querysträng i slutet av bilden.

[code lang="javascript"]
$('#update').click( function () {
var timestamp = new Date().getTime();
$('#image').attr('src', 'bild.jpg?t='+timestamp);
});

Vi lägger alltså till en tidsstämpel som sätts till epoch/unixtid och lägger till den som en sträng efter bilden. Bilden kommer alltså hämtas som bild.jpg?t=123445345 där siffrorna alltid ändras och aldrig är unika.

Vad detta innebär i praktiken är att webbläsaren luras att tro att bilden som hämtas alltid är unik och inte är samma som redans finns lagrad - det vill säga att bilden kommer alltid att förnyas, oavsett cache.