Chrome / Web浏览器重新缓存错觉

Question

Okay, so I came up with a cool way of forcing a file to re-cache itself only if it's modified. Below is the following code in JS:

function getCookie(name) {
    var value = "; " + document.cookie;
    var parts = value.split("; " + name + "=");
    if (parts.length == 2) {
        return parts.pop().split(";").shift()
    } else {
        return ''
    }
}
function fetchHeader(url, wch) {
    try {
        var req = new XMLHttpRequest();
        req.open("HEAD", url + '?t=' + Date.now(), false);
        req.send(null);
        if (req.status == 200) {
            return req.getResponseHeader(wch);
        } else return false;
    } catch (er) {
        return er.message;
    }
}
if (['npcdata.txt'].indexOf(u) != -1) {
    lastModified = fetchHeader(u, 'Last-Modified');

    if (lastModified != getCookie(u)) {
        fc = '?=' + Date.now() + '';
        document.cookie = u + '=' + lastModified + '';
    }
} else {
    fc = ''
}
x = this.ActiveXObject;
x = new(x ? x : XMLHttpRequest)('Microsoft.XMLHTTP');
x.open(d ? 'POST' : 'GET', u + fc, 1);
--sniped code, rest of ajax request data here like (x.send)--

Now, forgive me for the long code. Basically it performs a HEAD HTTP Request to check the files header and last modified date. Then, it compares it with the last modified date of that file stored in the users cookie, if it's different, I apply the ?=Date.now() string to the end of the AJAX URL With my x parameter so it re downloads the new file. It works fine! and it shows the new modified file contents.

The issue is... For some very odd reason, after it downloads the new file with the ?t=Date.now() it reads the new changes of the file, but then that data is not being cached after another refresh. It goes back to the original npcdata.txt values before I even applied the ?t=Date.now() . That doesn't make any sense to me.

How come adding the ?t=Date.now() string to the end of the url grabs the new data, but doesn't re-cache the new file? But it's giving me the illusion it is because when the file is request with AJAX with that ?t= string, it shows the updated version but then boom, right after the ?t=Date.now() string is removed it goes back to the original cached version? What?

So, it's impossible to re-cache the file only when it's been modified by checking the last modified date? There has to be a way using Javascript.

Answer 1

I found the issue.

I guess Chrome saves whatever file it requested with, with the ?t= as it's own cached, and doesn't re-cache the origin of the file . I suspect that would be a performance issue with chrome re-updating the cache each time for each new cached file with a new timestamp on it recursively. So, that makes sense.

The fix is I simply need to add the timestamp that was saved in the users cookie to the ?t= paremeter. So, for example in my code it would be:

fc='?='+getCookie(u)+'';

This way, that file will always have the same exact version number and would stay cached, and if modified, it will be updated and changed.

As pertinent to that screenshot, it looks a bit ugly, but we can change the data values around in Javascript later to make the URL prettier.

What went wrong here? I just thought that applying the ?t='+Date.now()+' would re-cache the ORIGINAL file, it does not. You need to keep having that same value (wherever you stored it), and keep it applied to the ?t= parameter. For the new cached file to have it's effect.