react页面缓存 使用本地存储

前面介绍了一种页面缓存的插件

现在来说说第一种方法，仅供参考，记录的不对的可以指点指点哟。

需求：

开发中有从详情页返回列表页的需求，这样一来页面返回后使用react-router会直接刷新页面，导致页面中的分页和搜索条件全部丢失，用户体验不佳，所以就必须将列表页的状态进行缓存。

解决办法：

1.使用本地缓存localStorage

把列表页中的状态都存在本地，然后从详情页回到列表页时，让他默认使用本地缓存中的状态，等列表页渲染完了后，做一个清除缓存的操作，这样的话，我们从别的页面进入列表页就不会使用本地缓存的状态。这种方式会存在两种弊端：

1.回到列表页还是会拿本地的状态去后端发请求获取数据

2.当我们回到列表页时，分页page=2,然后去增加一个搜索条件，然后向后端发送请求就会报错，因为很可能你这个搜索条件下根本不存在两页数据，这样后端就给你返回提示报错的信息

解决第一个弊端：

我们把列表中的状态和数据全部存在本地，等回到列表页时全部用本地的缓存数据和状态来渲染页面，如果再做其他操作就重新发请求

解决第二个弊端：

我们可以在搜索按钮提交的事件中把page重置为1，这样主要是搜索的话，就会默认给后端发送page=1的请求