Как использовать localStorage для хранения данных
В настоящее время я пытаюсь научиться использовать localStorage. Я попадаю в цикл при попытке добавить/обновить массив пользователей.
Вот код:
const users = [
{name: 'john', age: 25,},
{name: 'jane', age: 25},
{name: 'bob', age: 8}
]
const newUserInput = document.querySelector('#newuser');
const newAgeInput = document.querySelector('#newage');
const addUserBtn = document.querySelector("#addnewuser");
addUserBtn.addEventListener('click', (event)=>{
event.preventDefault();
users.push(createUser(newUserInput.value, parseInt(newAgeInput.value)));
localStorage.setItem('users', JSON.stringify(users));
})
const createUser = (name, age) => {
return {
"name": name,
"age": age
};
}
Поэтому, когда я впервые создаюUser, это сработало, и обновленные пользователи сохраняются в localStorage. Но когда я сделал это во второй раз, вместо добавления еще одного пользователя обновляется только первый добавленный мной пользователь. Кроме того, даже если это сработает так, как я хотел, я думаю, что могу столкнуться с аналогичной проблемой при обновлении страницы, потому что теперь я снова переопределяю пользователей с исходными тремя участниками в начале.
Любой вклад будет очень признателен.
Привет, большое спасибо за ваш ответ! Я тоже так думал, но не знал, как предоставить переменной пользователей существующих пользователей и одновременно получить ее из localStorage. Теперь я знаю
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Получите существующие элементы из локального хранилища с помощью ключа «пользователи». Если его не существует, то используйте созданный вами массив пользовательских объектов.
let users = JSON.parse(localStorage.getItem('users')) || [ {name: 'john', age: 25}, {name: 'jane', age: 25}, {name: 'bob', age: 8} ];Используйте let вместо const для пользователей, это сделает его изменяемым или изменяемым, а не неизменяемым или неизменяемым.
Надеюсь, эти два шага помогут. TLDR: измените константных пользователей на код на шаге 1.
Привет, большое спасибо за ваш ответ! это сработало!
Добро пожаловать! @Andrey Обязательно укажите это как ответ, чтобы другие, у кого возникнут похожие проблемы, могли попробовать решение!
массив users повторно инициализируется исходными тремя элементами, а любые ранее добавленные пользователи, хранящиеся в localStorage, игнорируются.
document.addEventListener('DOMContentLoaded', () => {
let users = JSON.parse(localStorage.getItem('users')) || [
{ name: 'john', age: 25 },
{ name: 'jane', age: 25 },
{ name: 'bob', age: 8 }
];
const newUserInput = document.querySelector('#newuser');
const newAgeInput = document.querySelector('#newage');
const addUserBtn = document.querySelector("#addnewuser");
addUserBtn.addEventListener('click', (event) => {
event.preventDefault();
const newUser = createUser(newUserInput.value, parseInt(newAgeInput.value));
users.push(newUser);
localStorage.setItem('users', JSON.stringify(users));
//-->Optionally, clear input fields after adding a user
newUserInput.value = '';
newAgeInput.value = '';
});
const createUser = (name, age) => {
return {
name: name,
age: age
};
};
});
большое спасибо за ваш ответ! Я так многому учусь из этого..
// Load users from localStorage or use default array
let users = JSON.parse(localStorage.getItem('users')) || [
{name: 'john', age: 25},
{name: 'jane', age: 25},
{name: 'bob', age: 8}
];
// Function to create a new user object
const createUser = (name, age) => ({ name, age });
// Get DOM elements
const newUserInput = document.querySelector('#newuser');
const newAgeInput = document.querySelector('#newage');
const addUserBtn = document.querySelector("#addnewuser");
// Add event listener for the add user button
addUserBtn.addEventListener('click', (event) => {
event.preventDefault();
// Create and add new user
users.push(createUser(newUserInput.value, parseInt(newAgeInput.value)));
// Save updated users array to localStorage
localStorage.setItem('users', JSON.stringify(users));
// Clear input fields
newUserInput.value = '';
newAgeInput.value = '';
});
привет большое спасибо за ответ! Я не знал, что смогу использовать || оператор над переменной. Означает ли это, что JSON.parse(localStorage.getItem('users')) имеет приоритет над [ {name: 'john', age: 25}, {name: 'jane', age: 25}, {имя: 'Боб', возраст: 8}]; ?
Привет. Да, поэтому, когда вы используете || тогда JSON.parse(localStorage.getItem('users')) будет иметь первый приоритет, и будет использоваться второй массив объектов, если первое условие возвращает ноль.
Вам нужно получить существующие элементы из локального хранилища, а не создавать заново
users.