js 接口返回大量数据缓存后如何更新?

Question

有一个页面请求一个接口
接口返回大量数据
这个数据会不定时更新 (半个月一次 10天一次)
这个数据怎么做本地存储？
本地缓存后，下一次接口数据更新后，我需要再次请求接口缓存，
我如何知道该何时去重新请求接口？

主要目的是减少没必要的请求，浪费资源

Answer 1

浏览器端的话，较大的数据可以存储在 localStorage 中。请求数据有以下几种方式：

• 第一种是每次都请求，验证版本号（或更新时间戳）；
• 第二种是定时请求（管他更新不更新，就是 20 天请求一次）；
• 第三种你可以使用一个 websocket，好处是，后台有更新就会返回新数据，但是大材小用了！！！
• 第四种，在页面上加个按钮【刷新】，完全凭心情吧。

所以，本地存储的目的是什么？是为了避免数据重新解析？还是后端不想每次查询数据（影响服务器性能），根据前后端职责进行选型就好了。个人感觉，后端提缓存优化是比较好的方案，就像请求 APP 更新，如果返回的是时间戳或 false 说明后端没有新数据，如果是新数据，那就直接替换本地 localStorage 中的数据。

Answer 2

可以了解下http协商缓存的知识， 设置Last-Modified或Etag。
链接描述

链接描述

Answer 3

按我的理解，你是想说数据太大，你想一次请求之后，就存在本地，下次进来就不用请求?
那就用localstorage存起来，但是接口数据更新的时候要告诉你的话，你在本地是没办法知道的，如果你不想请求大数据接口，建议跟后端再要一个检测数据是否更新的接口，每次进页面的时候请求那个检测更新的接口，有更新的话再请求大数据接口，然后更新本地数据

Answer 4

在将接口数据存入 localStorage 时顺带存入服务器返回的【当前时间 + 更新频率】= 有效期，而后每次访问先判断当前时间是否超有效期，以此确定拉取本地缓存 or 重新请求？

Answer 5

缓存到indexDB或者localstorage中，看你存取方便和数据大小，数据太大localstorage 也放不下的；
渲染页面首先从本地缓存中获取数据，同时发送请求。
当请求返回后判断数据是否一致，不一致则再次更新页面并且更新缓存。
如果返回的数据结构本身可以很方便地进行比较得知是否更新那就最好了，否则就比较hash吧，每次存储得加上hash，这个会稍微消耗一点性能