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

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

    现在来说说第一种方法,仅供参考,记录的不对的可以指点指点哟。
    需求:
    开发中有从详情页返回列表页的需求,这样一来页面返回后使用react-router会直接刷新页面,导致页面中的分页和搜索条件全部丢失,用户体验不佳,所以就必须将列表页的状态进行缓存。
    解决办法:
    1.使用本地缓存localStorage
    把列表页中的状态都存在本地,然后从详情页回到列表页时,让他默认使用本地缓存中的状态,等列表页渲染完了后,做一个清除缓存的操作,这样的话,我们从别的页面进入列表页就不会使用本地缓存的状态。这种方式会存在两种弊端:
    1.回到列表页还是会拿本地的状态去后端发请求获取数据
    2.当我们回到列表页时,分页page=2,然后去增加一个搜索条件,然后向后端发送请求就会报错,因为很可能你这个搜索条件下根本不存在两页数据,这样后端就给你返回提示报错的信息
     解决第一个弊端:
    我们把列表中的状态和数据全部存在本地,等回到列表页时全部用本地的缓存数据和状态来渲染页面,如果再做其他操作就重新发请求
     解决第二个弊端:
    我们可以在搜索按钮提交的事件中把page重置为1,这样主要是搜索的话,就会默认给后端发送page=1的请求
     
  • 相关阅读:
    Linux C下的正则表达式
    中英文i18 vue参数传递
    es map的用法
    webpack中publicPath问题
    prop中如何获取vue data中的数据 中英文方案
    利用map reduce方法将对象转成数组
    WPF 踩坑笔记2
    WPF 踩坑笔记1
    RabbitMQ 高阶用法 之 x-expire 过期时间设置
    JANUSEC应用网关1.0发布,提供一站式安全交付能力
  • 原文地址:https://www.cnblogs.com/shine1234/p/15222449.html
Copyright © 2011-2022 走看看