zoukankan      html  css  js  c++  java
  • react页面缓存 使用本地存储

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

    现在来说说第一种方法,仅供参考,记录的不对的可以指点指点哟。
    需求:
    开发中有从详情页返回列表页的需求,这样一来页面返回后使用react-router会直接刷新页面,导致页面中的分页和搜索条件全部丢失,用户体验不佳,所以就必须将列表页的状态进行缓存。
    解决办法:
    1.使用本地缓存localStorage
    把列表页中的状态都存在本地,然后从详情页回到列表页时,让他默认使用本地缓存中的状态,等列表页渲染完了后,做一个清除缓存的操作,这样的话,我们从别的页面进入列表页就不会使用本地缓存的状态。这种方式会存在两种弊端:
    1.回到列表页还是会拿本地的状态去后端发请求获取数据
    2.当我们回到列表页时,分页page=2,然后去增加一个搜索条件,然后向后端发送请求就会报错,因为很可能你这个搜索条件下根本不存在两页数据,这样后端就给你返回提示报错的信息
     解决第一个弊端:
    我们把列表中的状态和数据全部存在本地,等回到列表页时全部用本地的缓存数据和状态来渲染页面,如果再做其他操作就重新发请求
     解决第二个弊端:
    我们可以在搜索按钮提交的事件中把page重置为1,这样主要是搜索的话,就会默认给后端发送page=1的请求
     
  • 相关阅读:
    ios学习- 10大iOS开发者最喜爱的类库
    Android开发之组件
    2015最新iOS学习线路图
    2015最新Android学习线路图
    2015最全iOS开发自学视频资料(基础+实战)
    linux服务器常用密令
    windows服务器入门 使用FileZilla搭建FTP服务
    windows服务器入门 php的安装
    hdu 1106
    hdu 1040 As Easy As A+B
  • 原文地址:https://www.cnblogs.com/shine1234/p/15222449.html
Copyright © 2011-2022 走看看