Как изменить данные в localStorage?

Question

Как изменить данные в localStorage?

Алексей Потапович Потапович Ученик (70), на голосовании 11 месяцев назад

У меня есть страница аутентификации, на которой регистрируется или авторизуется пользователь, после чего его данные попадают или проверяются в localStorage

  const users = JSON.parse(localStorage.getItem("users"));
 const newUser = { userName, password, totalGames, wins, loses }; 
 users.push(newUser);
 localStorage.setItem("users", JSON.stringify(users));

далее его перенаправляет на страницу игры и передаются данные

     navigate("/game", { state: { userName, password, totalGames, wins, loses } });

на странице игры эти данные принимаются и передаются в нижние компоненты, где они изменяются через передаваемый метод

     const location = useLocation(); 
    const [userData, setUserData] = useState(location.state);

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

Answer 1

Чтобы обновить значения объекта пользователя в localStorage, вам необходимо выполнить следующие шаги:
1. Получите данные из localStorage с помощью метода `getItem` и преобразуйте их из строки JSON в объект JavaScript с помощью `JSON.parse`.
2. Найдите нужного пользователя в массиве данных.
3. Обновите значения его объекта.
4. Сохраните измененные данные обратно в localStorage с помощью метода `setItem`, предварительно преобразовав их в строку JSON с помощью `JSON.stringify`.
Вот пример кода, который показывает, как это можно реализовать:
```javascript
// Получение данных из localStorage
const users = JSON.parse(localStorage.getItem("users"));
// Поиск нужного пользователя по имени или другому уникальному свойству
const userIndex = users.findIndex(user => user.userName === userName);
if (userIndex !== -1) {
// Обновление значений объекта пользователя
const updatedUser = {
...users[userIndex],
totalGames: newTotalGamesValue,
wins: newWinsValue,
loses: newLosesValue,
};
// Замена старого объекта на обновленный
users[userIndex] = updatedUser;
// Сохранение измененных данных обратно в localStorage
localStorage.setItem("users", JSON.stringify(users));
}
```
Обратите внимание, что вы должны заменить `'userName'`, `'newTotalGamesValue'`, `'newWinsValue'` и `'newLosesValue'` на соответствующие значения переменных вашего приложения. Также убедитесь, что вы используете правильные условия для поиска нужного пользователя в массиве данных.

Answer 2

localStorage хранит строку, так что обновить придется всю строку.
Либо используй более продвинутую IndexedDB, для нее есть готовые библиотеки упрощающие работу с объектами.

Answer 3

сделать users объектом, и хранить данные в виде

 {
  [userName]: { password, totalGames, wins, loses }
}

так будет проще манипулировать данными в ls

 useEffect(() => {
  localStorage.setItem("users", JSON.stringify(userData))
}, [userData])

и

 //где-то глубоко
setUserData({ ...userData, [userName]: { ... } })

пример грубый
либо сделать проще: хранить не весь объект users по ключу users, а хранить для каждого юзера отдельную запись под ключом, скажем, "users/[userName]"