Реагировать на обновление JS Local Storage при изменении вида

Question

Как я могу обновить определенные свойства элемента или объекта локального хранилища, когда новые данные вводятся в течение всего пути пользователя, и не потерять то, что было введено ранее, или если пользователь решит обновить?

Мой путь из 5 контейнеров, состоящий из просьбы пользователя ввести следующее:

• Имя: строка
• Аватар: целое число
• Любимые жанры: несколько строк

В первом представлении я создал объект / элемент локального хранилища, который задает имя в функции handleSubmit.

handleSubmit (event) {event.preventDefault();

//Profile object
let profile = { 'name': this.state.name, 'avatar': null, 'genres': '' };

// Put the object into storage
localStorage.setItem('profile', JSON.stringify(profile));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('profile');

//Log object
console.log('retrievedObject: ', JSON.parse(retrievedObject));

//On form submission update view
this.props.history.push('/profile/hello');

}

В моем втором представлении я хочу обновить только свойство 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));
  }

Answer 1

Вам нужно будет прочитать существующее значение из 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));
}

Вероятно, должны быть некоторые проверки безопасности в приведенном выше коде, но, надеюсь, даст вам представление о начальной точке.