在当时，写react项目中【使用了redux】，有一个需求，就是上传图片，图片是通过网络url的地址引入的，但是这个图片的上传之后，图片改变了，但是图片并没有在前端改变，因此需要刷新，但是刷新之后redux的状态消失了。

我们应该怎么办呢？

一个好办法，就是将redux的状态存储到浏览器中。

浏览器的本地存储

相关概念

localStorage通常用于web的本地存储。对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

  • sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

  • localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

localStorage相关【sessionStorage同理】

  • localStorage.setItem(key, value)：设置存储数据，其中key和value是一对键值对，浏览器根据key来找value
  • localStroage.getItem(key)：返回键值为key的数据
1
2
3
4
windows.localStorage.setItem('key', 'value')

const a = windows.localStorage.getItem('key')
console.log(a) // output: 'value'

存储方法

  • 将redux的数据存进浏览器中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
useEffect(() => {

  if(isReload === true) {
    setTimeout(async () => {

      await window.localStorage.setItem('store', JSON.stringify(res))
      await window.location.reload()
      await store.dispatch({
        type: 'store',
        data: JSON.parse(window.localStorage.getItem('store'))
      })
      res = await store.getState()
    },100)
  } else {}

}, [isReload])
  • 进行判断，如果没有的话，就从浏览器拿出来
1
2
3
const res = store.getState() === undefined ? 
      JSON.parse(window.localStorage.getItem('store')) :
      store.getState()

这样子我们就搞定啦！