网页背景图片缓存问题

Question

首先，有一个接口，每次请求会得到一个url链接

这个url对应的是一个图片链接（例如：http://a.abc.cn/a.jpg）

每天返回的是一张不同的链接，也就是不同的图片，于是就达到了每天自动换背景的效果

那么问题来了，这个网页每次加载都要重新请求一下这个接口（总之这做样很不明智）

有没有什么好的办法让这个请就结果缓存一下，当天再次加载网页就可以不用请求呢？

然后第二天重复以上操作。。。

. . . .

Ps：只是个html，仅限原生js写法

Answer 1

一、

重点在于，图片地址是不是你可以控制的。如果是你可以控制的，那简单了，甚至不用JS，直接通过图片地址实现。

background:url(/xiaoming-2018-03-13.png)

在图片链接中加一个日期变量，然后图片设置超过一天以上的缓存时间就好了。

二、

如果是拿别人的图片，图片地址不能控制。

那就像 @圣人惠好可爱 同学说的，用 cookie 把图片地址保存起来，cookie 有效期到当天晚上12点整。

Answer 2

图片不大的话，可以用base64做缓存

Answer 3

设置一个cookie，有效期为晚上0点减去当前时间，如果存在cookie就不请求，第一次请求添加一个cookie

Answer 4

楼上的方法都不可行。如果浏览器设置了每次打开都从原地址重新加载的话（换句话说，此时浏览器关闭后会清空缓存的文件），你设置了不加载那么显示的将是一片空白，因为图片被浏览器删了。

正确的做法是同时考虑浏览器缓存和代码缓存。当浏览器的缓存开启的时候，尽量不重复加载；而当浏览器的缓存关闭的时候，就必须要重新加载了。

实现方法也很简单，给地址加一个时间参数，时间精确到天，比如原地址为：

http://www.example.com/a.jpg

加上时间参数：

http://www.example.com/a.jpg?...

这样一来，在今天（13号），所有请求的地址都是一样的，如果用户的浏览器开启了缓存，那么浏览器就会自动从缓存加载该图片。而如果用户过了一天再访问的时候，请求地址就会变为：

http://www.example.com/a.jpg?...

由于地址改变了，所以无论浏览器有没有开启缓存，都会重新加载。