如何使用localStorage实现双Input自动保存并解决输入同步问题

嘿，这个问题其实挺常见的，我来帮你捋明白怎么搞定！首先咱们先揪出问题根源：你的handleChange函数不管哪个输入框触发事件，都会同时把title和content两个状态字段设置成当前输入的值，连localStorage里的两个存储项也同步改成一样的——这不两个框内容同步才怪呢😅

要让两个输入框各自独立工作，核心就是让处理函数能区分“到底是哪个输入框在触发事件”，最简洁的实现方式就是给每个输入框加上name属性来做标识。

修改后的完整代码 #

constructor(props){
  super(props)
  this.state = {
    title: localStorage.getItem('title') || '',
    content: localStorage.getItem('content') || ''
  }
  this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
  // 从事件目标中解构出name和输入值
  const { name, value } = e.target
  // 动态更新对应name的状态字段
  this.setState({ [name]: value })
  // 同步更新localStorage中对应的键值对
  localStorage.setItem(name, value)
}
render() {
  return(
    <div>
      {/* 给标题输入框添加name属性，对应state里的title */}
      <input 
        type='text' 
        name="title"
        value={this.state.title} 
        onChange={this.handleChange} 
      />
      {/* 给内容输入框添加name属性，对应state里的content */}
      <input 
        type='text' 
        name="content"
        value={this.state.content} 
        onChange={this.handleChange} 
      />
    </div>
  )
}

关键改动说明 #

• 给输入框加name标识：每个input的name值和你state里的字段名（title、content）完全对应，这样处理函数就能准确识别是哪个输入框在触发事件。
• 动态更新状态与存储：在handleChange里，通过e.target.name拿到当前输入框的标识，用计算属性名（[name]）来精准更新对应的state字段，同时把localStorage的键也设为这个name，确保每个输入框只修改自己对应的存储项和状态。

这样修改之后，两个输入框就会各自独立工作，输入内容不会互相干扰，同时还保留了自动保存到localStorage的功能，页面刷新后内容也不会丢失~

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