localStorage
- это свойство глобального объекта window
, локальное хранилище.
Если мы будем обновлять страницу или закрывать, данные из хранилища будут на месте.
localStorage
имеет несколько нужных свойств. Данные в нем хранятся в виде ключ: значение.
Посмотреть на localStorage
и что в нем находится можно в консоли разработчика в application / Storage
setItem()
Добавляем в хранилище ключ и значение.
localStorage.setItem('number',5); // записываем number со значением 5. Если такое свойство есть, то значение просто перезапишется
getItem()
Получаем значение ключа.
console.log(localStorage.getItem('number')); // получим 5
removeItem()
Удаляем ключ
clear()
Очищает хранилище
Наш html
файл:
<form>
<input id="checkbox_id" type="checkbox" >
</form>
Далее код:
const checkbox = document.querySelector('#checkbox_id'),// получаем инпут
form = document.querySelector('form'); // получаем форму
if(localStorage.getItem('isCheked')) { // тут работаем с чекбоксом. Если в хранилище есть isCheked
checkbox.checked = true; // то ставим чекбокс в положение true то есть с галочкой
}
checkbox.addEventListener('change',(e)=> { // навешиваем событие
if(localStorage.getItem('isCheked')) { // если в localStorage есть ключ isCheked
localStorage.removeItem('isCheked'); // то удаляем его
} else {
localStorage.setItem('isCheked',true) // иначе устанавливем ключ isCheked и значение true
}
});
// Теперь чекбокс будет активен после нажатия и останется в таком состоянии, пока мы еще раз не нажем на него.
// Он будет активен или не активен даже если мы закроем браузер.
Что бы с такими структурами нормально работать их нужно перевести в формат JSON
. Иначе мы будем получать стркоу Object Object
.
const persone = {
name: 'Alex',
age: 24
};
const serializedPesron = JSON.stringify(persone); // парсим в JSON
localStorage.setItem('Alex', serializedPesron); // если мы здесь значение впишем presone, то в localStorage будет Object Object.
console.log(JSON.parse(localStorage.getItem('Alex'))); // парсим обратно и получаем наш обычный объект
По сути нам просто нужно превратить объект в строку, что бы хранить его в localStorage.