react页面缓存 使用本地存储

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

现在来说说第一种方法,仅供参考,记录的不对的可以指点指点哟。
需求:
开发中有从详情页返回列表页的需求,这样一来页面返回后使用react-router会直接刷新页面,导致页面中的分页和搜索条件全部丢失,用户体验不佳,所以就必须将列表页的状态进行缓存。
解决办法:
1.使用本地缓存localStorage
把列表页中的状态都存在本地,然后从详情页回到列表页时,让他默认使用本地缓存中的状态,等列表页渲染完了后,做一个清除缓存的操作,这样的话,我们从别的页面进入列表页就不会使用本地缓存的状态。这种方式会存在两种弊端:
1.回到列表页还是会拿本地的状态去后端发请求获取数据
2.当我们回到列表页时,分页page=2,然后去增加一个搜索条件,然后向后端发送请求就会报错,因为很可能你这个搜索条件下根本不存在两页数据,这样后端就给你返回提示报错的信息
 解决第一个弊端:
我们把列表中的状态和数据全部存在本地,等回到列表页时全部用本地的缓存数据和状态来渲染页面,如果再做其他操作就重新发请求
 解决第二个弊端:
我们可以在搜索按钮提交的事件中把page重置为1,这样主要是搜索的话,就会默认给后端发送page=1的请求
 
原文地址:https://www.cnblogs.com/shine1234/p/15222449.html