React中可否将函数结果存入localStorage实现页面刷新后数据留存

你不需要完全重写独立的新函数，原有createNewField的核心新增逻辑可以直接复用，只要补全存储、初始化读取两个环节的代码，就能实现刷新后数据回显。

现有函数的调整 #

你不需要推翻原有函数的逻辑，只要修正两个小问题，直接在函数内补全localStorage存储逻辑即可：

• 依赖旧state计算新值时，优先用setState的函数式更新，避免闭包拿到过期的旧state
• setState本身是异步操作，不要在调用setState后立刻读取state存缓存，要放到setState的第二个回调参数里执行，确保拿到的是更新完成的最新值

调整后的代码如下：

createNewField(key){
  // 先生成新的字段项
  const newFieldItem = {
    ...this.state.templates.empty[key],
    id: uniqid()
  }
  this.setState(
    // 函数式更新，拿最新的前置状态计算新值
    (prevState) => ({
      [key]: prevState[key].concat(newFieldItem)
    }),
    // 状态更新完成后，同步存入localStorage
    () => {
      // localStorage只能存字符串，对象/数组要先转JSON字符串
      localStorage.setItem(
        `persist_${key}`,
        JSON.stringify(this.state[key])
      )
    }
  )
}

补全初始化读取逻辑 #

只做存储还不够，组件初始化的时候要把之前存在localStorage里的数据读出来，作为state的初始值，不然页面刷新时state会回到默认初始值，自然没法回显。
这部分逻辑放到类组件的constructor里即可，示例：

constructor(props) {
  super(props)
  // 先定义基础初始state
  const baseState = {
    // 你项目里原有的state配置，比如templates等
    templates: {
      empty: {
        // 你原来定义的空字段模板
      }
    }
  }
  // 列出所有需要持久化的字段key，替换成你项目实际用的字段名
  const needPersistKeys = ['textField', 'selectField', 'dateField']
  needPersistKeys.forEach(key => {
    const storedValue = localStorage.getItem(`persist_${key}`)
    if (storedValue) {
      try {
        // 读出来的JSON字符串要转成对应对象/数组
        baseState[key] = JSON.parse(storedValue)
      } catch (err) {
        // 解析失败时用默认空数组，避免脏数据导致页面报错
        baseState[key] = []
      }
    } else {
      // 没有缓存数据时用默认空数组
      baseState[key] = []
    }
  })

  this.state = baseState
  // 你原来constructor里的其他方法绑定逻辑可以保留
}

额外优化建议 #

如果后续还有删除字段、编辑字段的操作，也需要同步更新localStorage的话，可以把存缓存的逻辑抽成一个独立的公共方法，所有修改对应state的操作完成后都调用这个方法同步缓存即可，不用重复写存储逻辑，核心的字段增删改逻辑都可以正常复用，不需要单独写一套只服务于持久化的业务逻辑。

注意：localStorage是持久化在用户本地浏览器的存储，不要存敏感信息，单条存储建议不要超过5MB，避免超出浏览器存储限额。

内容的提问来源于stack exchange，提问作者mgdlnjp