Question

我的客户经常抱怨他们无法看到我升级的css或js效果。问题是缓存文件也许这可能是解决方案：

$(document).ready(function(){
    var a = 0;
    var b = localStorage.getItem('clear');
    if (a !== b) {
        localStorage.setItem('clear', a);           
        window.location.reload(true);
    }
});

下次我更改css或js var a时将1。
下次 - 再次0，等等。

我仍然没有对此进行测试，但这很简单，应该可以使用你觉得有什么缺点吗？

Answer 1

严格的平等似乎是一个问题。将其更改为，

if (a != b) {

或者在进行比较之前，只需将从本地存储检索到的值转换为数字。

var b = +(localStorage.getItem('clear'));

Answer 2

对我来说，干净的解决方案是在url上包含版本作为GET参数：

<link rel="stylesheet" href="style.css?v=2017-12-29-01">
<script src="script.js?v=2017-12-29-01" type="text/javascript"></script>

它没有副作用，也不需要重新加载页面。

已编辑 OP发布了一条有趣的链接。看来我的方法不是通用的解决方案。某些代理可能配置为不从缓存中提供此类网址：

Revving Filenames: don’t use querystring

解决方案是通过在URL中包含文件的时间戳或版本号来修改名称。但哪个更好：mylogo.1.2.gif或mylogo.gif？v = 1.2？要获得流行代理缓存的好处，请避免使用查询字符串进行加速，而是修改文件名本身。

作者总结道：

当缓存标头指示适当时，代理管理员可以更改配置以使用查询字符串支持缓存资源。但默认配置是Web开发人员应该最常遇到的。 ... 对于那些支持代理的用户，通过避免可缓存资源的查询字符串来帮助提高访问速度

在这种情况下：

<link rel="stylesheet" href="style-2017-12-29-01.css">
<script src="script-2017-12-29-01.js" type="text/javascript"></script>

使用localstorage解决缓存的css和js

2 个答案:

Revving Filenames: don’t use querystring