关于浏览器本地存储的一点小用法

---

title: 关于浏览器本地存储的一点小用法
date: 2021-10-16
categories: frontend
tags:

• JS
• React
• 请参考：https://bk201-drama.github.io/

---

在当时，写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的数据

windows.localStorage.setItem('key', 'value')

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

存储方法

• 将redux的数据存进浏览器中

  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])

• 进行判断，如果没有的话，就从浏览器拿出来

const res = store.getState() === undefined ? 
      JSON.parse(window.localStorage.getItem('store')) :
      store.getState()

这样子我们就搞定啦！