Хранение массива в локальном хранилище
Давайте потренируемся работать с анонимными функциями. Сделаем функцию 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
Локальное хранилище в JavaScript (localStorage)
В JavaScript есть объект localStorage, который позволяет считывать и записывать данные в локальное хранилище. В localStorage можно длительное время хранить до 10 мегабайт информации, в которой может содержаться сколько угодно переменных. Этим локальное хранилище выгодно отличается от cookies, в которых можно хранить только 30 переменных на домен со значением короче 4096 символов.
Создание и изменение в локальном хранилище
Чтобы создать (записать) или изменить значение в локальном хранилище, используется метод setItem:
localStorage.setItem('Ключ', 'Значение');Тогда изменится запись с названием «Ключ». Её значение будет установлено на «Значение». Если запись в локальном хранилище с таким названием уже была, то она перезапишется. Вместо «Ключ» и «Значение» в примере можно подставить любой текст или цифры, чтобы сохранить их в хранилище.
Вы можете просматривать и редактировать в локальное хранилище прямо в браузере, с помощью средств разработчика. Читайте подробнее об этом в статье «Редактор localStorage в вашем браузере».
Есть ещё один способ записать/изменить значение в локальном хранилище:
localStorage['Ключ'] = 'Значение';В локальном хранилище можно хранить только строки, как и в cookies. Но его размера вполне достаточно, чтобы поместить туда сериализованные данные в формате JSON.
Рекомендуем ознакомиться со статьёй «Работа с JSON в JavaScript (stringify, parse)», чтобы больше узнать о формате JSON.
Продемонстрируем способ записи объекта в локальное хранилище путём перевода его в JSON строку:
var a = < 'BOOL': true, 'INT': 20, 'ARRAY': [1, 2, 3], 'STRING': 'Тише, мыши, кот на крыше' >; localStorage.setItem('Данные', JSON.stringify(a) );Чтение из локального хранилища
Попробуем прочитать значение по ключу из локального хранилища. Для этого используем тот же самый объект localStorage и метод getItem:
var a = localStorage.getItem('Ключ');При выполнеии такого кода в переменную «a» будет записано значение из локального хранилища, которое хранилось там под ключом «Ключ». Есть другой способ обращения к значению:
var a = localStorage['Ключ'];В случае сохранения данных в формате JSON, о котором писали в предыдущем параграфе, необходимо перевести данные из JSON строки в объект JavaScript:
var a = localStorage.getItem('Данные'); var b = JSON.parse(a);— таким образом можно хранить довольно большие объекты в одном ключе, в локальном хранилище.
Удаление из локального хранилища
Чтобы удалить значение из локального хранилище, необходимо воспользоваться методом removeItem. Продемонстрируем это:
localStorage.removeItem('Ключ');При выполнении такого кода будет удалено значение, которое соответствует ключу с названием «Ключ». Есть другой способ удаления значения:
delete localStorage['Ключ'];Бывают случаи, когда необходимо удалить вообще все данные из локального хранилища — все ключи и значения. Для этого используется метод clear
localStorage.clear();Как сохранять данные в браузере или краткий гайд по 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?
HTML5 localStorage позволяет хранить пары данных ключ/значение. И ключ, и значение должны быть строками.
Чтобы сохранить массив в объекте localStorage в виде пары ключ/значение, необходимо закодировать массив в строку JSON. И при извлечении, соответственно, нужно декодировать его обратно в массив.
Вот пример кода:
let array = [1, 2, 3];
localStorage.setItem(array, JSON.stringify(array));
array = JSON.parse(localStorage.getItem(«array»));
console.log(typeof array); // объект
console.log(array); // [1, 2, 3]
Сохранение объекта в localStorage
Чтобы сохранить объект как пару ключ/значение, необходимо, также как и массив, закодировать объект в строку JSON. И при извлечении нужно декодировать его обратно в объект.
localStorage.setItem («object», JSON.stringify(«object»));
object = JSON.parse (localStorage.getItem («object»));
console.log(typeof object); // объект
console.log(object); // Объект
Вот в такой небольшой статье мы с Вами разобрали то, как сохранять массивы и объекты JavaScript в хранилище localStorage. Однако, так как это только вершина айсберга под названием JavaScript, то предлагаю Вам ознакомится с моим видеокурсом «JavaScript, jQuery и Ajax с Нуля до Гуру».
Создано 21.06.2018 08:08:43
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.