Javascript 在视图更改时对JS本地存储更新作出反应

在整个用户旅程中输入新数据时，如何更新本地存储项或对象的某些属性，而不丢失以前输入的数据，或者如果用户决定更新，如何更新这些属性

我的5个容器之旅包括要求用户输入以下内容：

• 名称：string
• 化身：整数
• 最喜欢的类型：多个字符串

在第一个视图中，我创建了本地存储对象/项，用于在

handleSubmit

函数中设置名称

handleSubmit（事件）{ event.preventDefault（）

}

在第二个视图中，我只想更新

avatar

属性，并维护用户在前一个视图中输入的内容

我在handleSelect函数中这样做：

handleSelect(i) {
    let selectedAvatarId;
    let avatars = this.state.avatars;

    avatars = avatars.map((val, index) => {
      val.isActive = index === i ? true : false;
      return val;
    });

    this.setState({
      selectedAvatarId: selectedAvatarId
    })

    //Profile object
    let profile = { 'avatar': i };

    //Update local storage with selected avatar
    localStorage.setItem('profile', JSON.stringify(profile));
  }

---

您需要从localStorage读取现有值，将其解析为JSON，然后操作数据，并将其写回。有许多库可以方便地使用localStorage，但类似的功能应该可以作为通用功能使用：

function updateProfile = (updatedData) => {
    const profile = JSON.parse(localStorage.getItem('profile'));
    Object.keys(updatedData).forEach((key) => {
        profile[key] = updatedData[key];
    });
    localStorage.setItem('profile', JSON.stringify(profile));
}

如果使用对象排列，它也会看起来更干净：

function updateProfile = (updatedData) => {
    const profile = {
        ...JSON.parse(localStorage.getItem('profile')),
        ...updatedData
    };
    localStorage.setItem('profile', JSON.stringify(profile));
}

---

上面的代码中可能会有一些安全检查，但希望能为您提供一个起点。

有点旁注，但为什么您要在整个过程中使用localStorage？您拥有更快、更可靠的组件状态。在完成创建问题后，只需设置containe组件状态的数据并将其保存到localStorage—不幸的是，我没有将容器设置为主父容器，以便它们都可以共享状态。另一种方法是建立一个商店，然而，这只是一个原型，并且目前正在设法使其工作。非常感谢。

function updateProfile = (updatedData) => {
    const profile = {
        ...JSON.parse(localStorage.getItem('profile')),
        ...updatedData
    };
    localStorage.setItem('profile', JSON.stringify(profile));
}