Как записать объект в localstorage js

Как сохранить объект в localstorage js

Хранить в localStorage объекты нельзя, но можно хранить строки. Поэтому для хранения объекта можно преобразовать его в строку, например через JSON.stringify() . А при извлечении из хранилища преобразовывать строку обратно в объект с помощью JSON.parse() .

// создаём объект const user =  name: 'Ivan', age: 23 >; // преобразовываем объект в строку и сохраняем в localStorage localStorage.setItem('user', JSON.stringify(user)); // извлекаем данные и преобразовываем в объект const savedUser = JSON.parse(localStorage.getItem('user')); 

Хранение массива в локальном хранилище

Давайте потренируемся работать с анонимными функциями. Сделаем функцию each, которая первым параметром будет принимать массив, а вторым — функцию-callback, которая применится к каждому элементу этого массива.

Исходники кода

//let arr = [‘user1’, ‘user2’, ‘user3’]; //localStorage.setItem(‘user’, JSON.stringify(arr)); //let json = localStorage.getItem(‘user’); //let arr = JSON.parse(json); //arr[1] = ‘user. ‘; //localStorage.setItem(‘user’, JSON.stringify(arr)); //console.log(localStorage.getItem(‘user’)); function saveAll(id, data) < localStorage.setItem(id, JSON.stringify(data)); >function getAll(id) < let json = localStorage.getItem(id); return JSON.parse(json); >function get(id, key) < let arr = getAll(id); if (arr[key] !== undefined) < return arr[key]; >else < return null; >> function set(id, key, newValue) < let arr = getAll(id); arr[key] = newValue; saveAll(id, arr); >//saveAll(‘user’, [‘user1’, ‘user2’, ‘user3’]); set(‘user’, 1, ‘user!’) console.log(get(‘user’, 1));

Смотрите также

• видео
  стикеры на ООП с сохранением в локальное хранилище

Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry

Как сохранять данные в браузере или краткий гайд по LocalStorage

Привет! В этой статье я бы хотел поговорить про LocalStorage, его методы и особенности. Статью можно посмотреть в формате видео по этой ссылке. Ну что, приступим?

И так, что же это такое. LocalStorage это свойство объекта window, предназначенное для хранения пар ключ/значение в браузере. В зависимости от браузера, мы можем сохранять до 5 мб данных. Но тогда возникает логичный вопрос, зачем нам localStorage, если данные мы можем сохранять данные в обычных переменных? Ответ очень прост, все что мы запишим в localStorage, останется там после перезагрузки страницы и даже после закрытия браузера. Теперь поговорим о том как мы можем взаимодействовать с localStorage.

Запись в LocalStorage

Чтобы сохранить данные можем использовать метод setItem(key, value) у localStorage. Этод метод принимает два аргумента: ключ по которому мы будем сохранять информацию и само значение, которое мы хотим сохранить. Например:

localStorage.setItem('name', 'Alex');

Для просмотра наших записей надо открыть DevTools там найти вкладку Application и там обязательно будет LocalStorage

Чтение из LocalStorage

Теперь конечно же хочется получить эти данные. Для этого воспользуемся методом getItem(key) . Результат можно вывести в консоль, или сохранить в переменную.

console.log(localStorage.getItem('name'));

Только строки

Как видите, все просто, но есть один маленький нюанс. Значение, которое мы записываем должно быть строкой. Давайте попробуем добавить поле age со значением 5. Для этого напишем:

localStorage.setItem('age', 5);

Сохраняем файл. И что мы видим? Ошибок никаких нет, а если перейти во вкладку Application, то мы увидим что запись прошла успешно. Это конечно же так, но при записи пятерка стала строкой, то есть была автоматически приведена к типу string. Это не то чтобы плохо, но может привести к неожиданному поведению, к примеру при строгом сравнении. Я бы советовал привести строку к числу, это можно сделать вот так:

const age = +localStorage.getItem('age');

Если с примитивами все просто, то что на счет объектов? Создадим объект user и попробуем записать его в LocalStorage:

const user = < name: 'alex', age: 5 >; localStorage.setItem('user', user);

Переходим во вкладку Application и видим [objectObject] .

И есть одна небольшая проблемка у этой строки не будет полей, которые мы определили в объекте user. Это просто обычная строка. И в исходный вид это уже никак не вернуть. Для того, чтобы записать объект в localStorage надо сделать его строкой. У нас как раз есть прекрасный формат под это, и имя его json . Для преобразования объекта в строку нужно использовать JSON.stringify :

localStorage.setItem('user', JSON.stringify(user));

Теперь все записалось корректно:

Чтобы получить объект в первозданном состоянии используем метод parse у JSON :

JSON.parse(localStorage.getItem('user'));

Полученый результат можем записать в консоль, или сохранить в переменную.

Удаление из LocalStorage

Мы научились записывать и получать элементы, теперь надо научится их удалять. Для этого будем использовать метод removeItem(key) который удалит поле с ключом key .

localStorage.removeItem('user');

Так же во вкладке Application мы можем выделить нужный нам рядок и нажать на крестик, что тоже приведет к удалению.

Очистка LocalStorage

Чтобы очистить все поля мы можем использовать метод clear() :

localStorage.clear();

Вариант из Application:

Я рекомендую так делать, только тогда, когда вы на 200% уверены что все данные заносили только вы, и после удаления чего либо ваш сайт не начнет вести себя некорректно.

Событие storage

Если у вас есть потребность, или желание прослушивать изменение в localStorage, то можно просто добавить слушатель событий на ‘storage’ :

window.addEventListener('storage', (event) => console.log(event));

При каждом изменении localStorage генерируется событие storage. Оно отрабатывает на всех вкладках, на которых открыт наш сайт, кроме той, где мы создали это событие. В event хранятся название поля которое мы затронули, старое значение, новое значение, url документа и storageArea. Если интересно, крайне рекомендую переписать этот кусок кода себе, открыть две вкладки вашего локалхоста и посмотреть как это работает.

Также, надо держать в голове что самый «топовый» браузер, то бишь IE вызывает событие ‘storage’ даже если данные не изменились, что является некорректным поведением. Поэтому если вам не пофиг на екплоер и вы не хотите каких-то нежданчиков, то надо явно сравнивать новое и старое значение, которые мы можем получить из event .

Итоги

• Благодаря localStorage мы можем хранить пары ключ — значение в браузере
• Данные остаются в хранилище даже после выключения компьютера
• Данные привязаны к конкретному браузеру и источнику
• И ключ и значения должны быть строками

• setItem(key, value) – записать пару ключ/значение
• getItem(key) – получить данные по ключу key
• removeItem(key) – удалить значение по ключу key
• clear() — очистить хранилище

Как записать объект в localstorage js

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

Уроки и статьи

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Какая тема Вас интересует больше?

Бесплатный курс

Основы Unreal Engine 5

Пройдя курс:

— Вы получите необходимую базу по Unreal Engine 5

— Вы познакомитесь с множеством инструментов в движке

— Вы научитесь создавать несложные игры

Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

Бесплатный онлайн-семинар

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.