如何做到科学的缓存数据？

Question

问题描述：假设页面有一个数组对象如下(实际可能数据会更多)，当页面第一次拿到后端传来的数据的时候，将其进行缓存（类似localStorage）。后续的UI渲染都在缓存中拿取，那么当后端数据更新时，前端如何应该如何及时更新数据呢？以及前端更新数据的一个理想时机？
list:[{
title:'titile1',
content:'con1'
},{
title:'titile1',
content:'con1'
},{
title:'titile1',
content:'con1'
}]