Как сделать локальное хранилище
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
В нашей сегодняшней статье мы разберемся, что такое localStorage. LocalStorage — это свойство, открывающее доступ к специальному объекту Storage (хранилище). Его используют для получения информации из локального хранилища. Данные хранятся там неограниченный период и могут быть удалены только при помощи JavaScript.
Эти данные характерны для протокола веб-страницы: это ключи и значения в формате строк (даже целочисленные значения ключей будут преобразовываться в строки).
Информация в localStorage не стирается после обновления страницы или когда браузер был закрыт и запущен снова.
Проще говоря, localStorage – это объект в браузере, которым мы можем воспользоваться. На языке JS он представляет собой свойства глобального объекта браузера (то есть — window, окна).
У него есть аналог — sessionStorage, который отличается только тем, что в нем хранятся данные для одной вкладки (значения сотрутся после ее закрытия).
Синтаксис выглядит вот так:
Из исключений свойства можно отметить SecurityError. Это означает, что запрос к веб-хранилищу выполняется без разрешения или источник для хранения не считается верной комбинацией схемы, хоста и порта.
Как работать с localStorage
Можно использовать такие методы и свойства:
- key(index) – извлечь ключ на определенной позиции;
- setItem(key, value) – записать ключ и значение объекта;
- removeItem(key) – стереть данные с указанным ключом;
- getItem(key) – считать информацию по заданному ключу;
- clear() – стереть всю информацию;
- length – получить значение количества информации в объекте.
Например, попробуем добавить данные с помощью Storage.setItem():
Для считывания данных есть следующая опция:
let kot = localStorage.getItem('Пример');
Удалить данные можно с помощью функции removeItem, которая вернет значение undefined:
Если же вы хотите сразу избавиться от всех записей и полностью очистить свойство, то можно применить следующий способ:
Обратите внимание, что для браузеров поддержка localStorage начинается с их определенной версии.
Ключи и особенности работы
В том, что такое localStorage, мы разобрались. Теперь нужно понять, для чего он нужен и как с ним можно работать. Это свойство хранит данные между сессиями пользователей. Можно придумать огромное количество вещей для хранения в браузере: например, сохранение позиции при просмотре видео, ФИО, адрес электронного ящика, которые не хочется набирать в новых полях постоянно.
Работа с localStorage в основном представляет собой классический набор действий с объектом JavaScript.
Особенности localStorage:
- объект для всех вкладок и окон в пределах одного источника является единым;
- данные не обладают сроком давности, поэтому хранятся все время.
Это означает, что достаточно находиться в одном домене или протоколе, чтобы получать одни и те же данные. При этом URL может меняться.
Объект доступен всем окнам, а значит, если мы запишем значение в одном окне, то они станут доступны и из другого — это очень удобно.
Данные в localStorage можно записывать и получать так же, как в обычных объектах JS. Но это не рекомендуется, потому что в некоторых случаях могут не пройти чтение и запись как свойства объекта. Также при модификации данных может не сработать событие storage.
Методы работы с localStorage позволяют считывать, записывать и удалять данные. Но как получить все значения и ключи, хранящиеся в свойстве? Так как они не итерируемые, то перебрать их в цикле невозможно. Но мы можем пройти по ним, как по стандартному массиву данных:
Другой способ — обращение к свойству, как к обычному объекту, с использованием цикла. В таком случае будут перебираться ключи, но и отобразятся и несколько встроенных полей:
Такой фрагмент кода покажет ряд встроенных свойств, среди которых getItem, setItem. Чтобы избежать этого, можно воспользоваться фильтрацией данных. Она пропустит эти ключи:
Еще один вариант получения ключей — Object.keys. Затем уже можно будет отобразить их значения в цикле:
Последний вариант является рабочим, потому что функция возвращает только те ключи, которые принадлежат объекту, при этом прототип полностью игнорируется.
LocalStorage или Cookies?
Давайте разберемся, для чего нам localStorage, когда у нас уже есть Cookies:
Примеры работы с localStorage
В качестве примера можно открыть вкладку с localStorage в вашем браузере, а затем записывать и извлекать из него данные вручную.
Код для JS-файла будет выглядеть вот так:
LocalStorage может хорошо работать с вложенными структурами, при желании в него можно записать целый объект.
Не стоит забывать, что браузеры выделяют до 5 Мб для хранения свойства. Если лимит будет превышен, то получим исключение QUOTA_EXCEEDED_ERR. Оно поможет проверить вместимость хранилища. Для этого воспользуемся таким фрагментом кода:
Смело используйте localStorage в самых разных проектах. У этой технологии хорошая стандартизация и поддержка, а еще важно, что со временем она развивается и улучшается.
Наличие свободного дискового пространства, пригодного для хранения разнообразных данных, очень востребовано как для личного использования, так и в производственных целях для малых или крупных офисов. Встроенных возможностей запоминающих устройств обычных компьютеров часто бывает недостаточно. Поэтому все чаще пользователи используют сетевые хранилища NAS или SAN, доступный внутренний объем которых ограничивается только желаниями потребителей, а также напрямую зависит от поставленных задач.
В нашем обзоре мы постараемся объяснить принципы действия хранилищ NASи SAN, опишем способ создания устройства для хранения данных на основе D-Link DSN-1100-10, объясним порядок наиболее востребованных действий с ним и возможных подключений, а также частично остановимся на вопросе восстановления информации в случае ее непредвиденной утрате в хранилище.
Network Attached Storage (сокращенно NAS) представляет собой хранилище информации, состоящее из набора простых дисков, к которому обеспечен быстрый сетевой доступ. Любой пользователь, обладающий соответствующим разрешением, может взаимодействовать с хранилищем, а именно сохранять, размещать и скачивать данные напрямую.
NAS оснащен собственной программной системой, все действия которой направлены на обеспечение безопасных способов хранения и предоставления своевременного доступа к файлам.
Storage Area Network (сокращенно SAN) – это сеть хранения данных, конструктивное исполнение которой выполняет объединение внешних запоминающих устройств в единый комплекс и обеспечивает последующее их распознавание в качестве локальных носителей.
Сеть SAN задействует блочный метод доступа к данным при помощи основного протокола iSCSI, который функционирует на TCP/IP и обеспечивает управление и корректное взаимодействие с различными системами хранения.
Сетевая система универсальна, поддерживается практически всеми ОС и не нуждается в использовании специфического оборудования.
Мы покажем сборку и настройку хранилища на основе D-Link DSN-1100-10, который будет обеспечивать функциональную поддержку разных видов массивов RAID, таких как RAID 0, 1, 1+0, 5.
Поместите в соответствующие лотки жесткие диски и зафиксируйте их.
Последовательно поместите заполненные лотки в установочные гнезда.
Процесс сборки хранилища окончен, и можно приступать к его включению и последующему сетевому соединению.
Вставьте один конец кабеля в данный порт, а второй – в сетевой порт маршрутизатора, что обеспечит устойчивое подключение к сети.
При подключении хранилища к персональному компьютеру пользователям понадобиться кабель соединения, концевые зажимы которого выполнены по перекрестной схеме.
При прямом соединении хранилища с ПК вставьте оставшийся конец кабеля в соответствующий lan-порт на задней панели компьютера.
Теперь включите хранилище и дождитесь окончания загрузки.
На ПК откройте веб-браузер и укажите в строке адрес вашего хранилища, сведения о котором представлены в руководстве пользователя. На странице приветствия подтвердите свое согласие с условиями лицензионного соглашения, щелкнув соответствующую кнопку управления.
В выделенном поле установите персональную парольную фразу и перейдите на следующую страницу настроек.
Настройте службу оповещения по электронной почте, заполнив соответствующие поля, для получения важных сведений о состоянии и работоспособности NAS.
Процедура первичной настройки закончена.
Создание и изменение в локальном хранилище
Чтобы создать (записать) или изменить значение в локальном хранилище, используется метод setItem: Тогда изменится запись с названием "Ключ". Её значение будет установлено на "Значение". Если запись в локальном хранилище с таким названием уже была, то она перезапишется. Вместо "Ключ" и "Значение" в примере можно подставить любой текст или цифры, чтобы сохранить их в хранилище.
Вы можете просматривать и редактировать в локальное хранилище прямо в браузере, с помощью средств разработчика. Читайте подробнее об этом в статье "Редактор localStorage в вашем браузере".
Рекомендуем ознакомиться со статьёй "Работа с JSON в JavaScript (stringify, parse)", чтобы больше узнать о формате JSON.
Чтение из локального хранилища
Попробуем прочитать значение по ключу из локального хранилища. Для этого используем тот же самый объект localStorage и метод getItem: При выполнеии такого кода в переменную "a" будет записано значение из локального хранилища, которое хранилось там под ключом "Ключ". Есть другой способ обращения к значению: В случае сохранения данных в формате JSON, о котором писали в предыдущем параграфе, необходимо перевести данные из JSON строки в объект JavaScript: - таким образом можно хранить довольно большие объекты в одном ключе, в локальном хранилище.
Удаление из локального хранилища
Чтобы удалить значение из локального хранилище, необходимо воспользоваться методом removeItem. Продемонстрируем это: При выполнении такого кода будет удалено значение, которое соответствует ключу с названием "Ключ". Есть другой способ удаления значения: Бывают случаи, когда необходимо удалить вообще все данные из локального хранилища - все ключи и значения. Для этого используется метод clear
В первые дни Интернета сохранение данных было возможно только на сервере. В настоящее время благодаря использованию LocalStorage мы можем хранить данные на клиентах, таких как браузеры и мобильные приложения, без связи с внутренним приложением.
В этой статье мы обсудим, как разработчики могут хранить данные на клиенте с помощью файлов cookie, и как LocalStorage улучшил этот опыт. Затем мы рассмотрим функции, которые хранят и извлекают данные из LocalStorage. Наконец, мы обсудим, когда целесообразно использовать LocalStorage.
Хранение данных в браузере с помощью файлов cookie
Cookies - это текстовые данные, хранящиеся в клиенте. Они традиционно устанавливаются сервером, однако они также могут быть созданы с помощью кода JavaScript в браузере. Данные в файлах cookie хранятся в виде пар строк ключ / значение.
С помощью файлов cookie вы можете хранить максимум 4 КБ данных на клиенте. Для современных интерфейсных приложений этого может быть недостаточно.
Давайте посмотрим, как LocalStorage позволяет нам создавать и хранить данные на стороне клиента, с гораздо большим объемом памяти, чем предоставляют файлы cookie.
Что такое LocalStorage?
LocalStorage - это хранилище данных ключ / значение, которое доступно в браузере пользователя. Как и файлы cookie, LocalStorage может хранить только строковые данные для своих ключей и значений. Хранилище данных доступно только для JavaScript в этом домене.
Наличие LocalStorage для каждого домена не позволяет вредоносному JavaScript, размещенному на других сайтах, манипулировать или читать данные наших клиентов, которые используются нашим доменом.
Данные в LocalStorage не имеют срока годности. Его можно удалить с помощью JavaScript или очистив кеш браузера.
Теперь, когда мы знаем, что такое LocalStorage, давайте использовать его API для управления данными в браузере.
Как использовать LocalStorage
Мы можем использовать следующие методы для глобального объекта localStorage для управления данными на стороне клиента:
setItem() - Добавить ключ / значение в LocalStorage
getItem() - Получить значение из LocalStorage
removeItem() - Удалить значение по его ключу
clear() - Удалить все элементы из LocalStorage
key() - Получить ключ предмета из LocalStorage
SetItem()
Используйте функцию setItem() для сохранения элемента в LocalStorage. Эта функция принимает ключ в качестве первого аргумента и значение в качестве второго аргумента. Как упоминалось ранее, оба должны быть строками.
В консоли вашего браузера добавим элемент в наш localStorage :
GetItem()
Используйте функцию getItem() для извлечения данных из LocalStorage. Эта функция берет ключ, который использовался при сохранении данных в качестве аргумента.
В вашей консоли давайте восстановим и распечатаем значение, которое было сохранено ранее с помощью setItem() :
removeItem()
Используйте функцию removeItem() , чтобы удалить один элемент из LocalStorage. Вам необходимо указать ключ элемента, который вы хотите удалить, в качестве аргумента.
Попробуйте это в вашей консоли, чтобы удалить данные, сохраненные с setItem() :
Чтобы подтвердить, что он был удален, попробуйте получить его еще раз:
clear()
Чтобы удалить все данные, хранящиеся в LocalStorage, используйте функцию clear() :
Функция key() позволяет извлечь ключ элемента, сохраненного в LocalStorage по его индексу. Браузер создает целочисленный индекс для каждого элемента, добавленного в LocalStorage.
Поскольку мы не генерируем этот индекс, нам не следует использовать этот индекс для непосредственного получения ключей. Однако мы можем использовать эту функцию, чтобы получить все ключи, хранящиеся в LocalStorage:
Используя свойство LocalStorage.length , мы перебираем каждый созданный индекс для печати всех ключей, которые мы сохранили в LocalStorage. Затем мы можем использовать эти ключи в getItem() для получения всех сохраненных данных.
Теперь, когда мы рассмотрели все функции для управления данными в браузере пользователя, давайте рассмотрим особый случай сохранения сложных объектов вместо строковых данных.
Хранение объектов в LocalStorage
LocalStorage может использовать только строки для своих ключей и значений. Если мы пытаемся сохранить любой другой тип данных, он преобразует его в строку перед сохранением. Это может привести к неожиданному поведению, когда мы хотим сохранить объекты JavaScript.
Давайте создадим объект person в консоли браузера и сохраним его в LocalStorage:
Теперь setItem() преобразовал объект person в строку. Когда мы получаем person как в примере ниже:
Наша консоль браузера покажет это:
Конвертация объекта JavaScript в строку приводит к [object Object] . По общему признанию, возвращение строки, которая только указывает, что объект был сохранен, бесполезно.
Чтобы правильно хранить объекты JavaScript в LocalStorage, нам сначала нужно преобразовать наш объект в JSON строку.
Мы для этого используем встроенную функцию JSON.stringify() . Результирующая строка этой функции будет содержать все свойства нашего объекта JSON. Мы сохраняем вывод этой функции используя setItem() .
Давайте сохраним объект person после его строкового преобразования:
Чтобы извлечь эти данные как объект, нам нужно сделать две вещи. Во-первых, нам нужно использовать getItem() для извлечения из LocalStorage. Затем нам нужно преобразовать JSON строку в объект JavaScript.
Давайте начнем с того, что возьмем элемент из LocalStorage:
Теперь преобразуйте строку LocalStorage в объект с помощью JSON.parse() и выведете его в консоли браузера:
Запуск этого кода даст вам следующий вывод:
Обратите внимание на разницу в цвете в консоли, когда мы впервые регистрировали строку, когда мы регистрировали объект. Мы также регистрируем свойство name , чтобы гарантировать, что свойства объекта все еще доступны.
Теперь, когда у нас есть стратегия расширения использования LocalStorage за пределами строк, давайте обсудим лучшие практики при ее использовании.
Когда использовать LocalStorage
LocalStorage обеспечивает базовое сохранение на вашем сайте. Он обычно используется для хранения данных, которые было бы удобно просматривать пользователю, даже если браузер был обновлен. Например, многие формы сохраняют введенные пользователем данные в LocalStorage, пока они не будут отправлены.
Статические сайты обычно используют LocalStorage для хранения пользовательских настроек, как тема пользовательского интерфейса. Без веб-сервера и базы данных, чтобы сохранить предпочтения пользователя, LocalStorage позволяет им продолжать использовать свой веб-сайт с их настройками.
Однако LocalStorage не следует использовать для больших объемов данных. Помимо ограничения в 5 МБ, которого может быть недостаточно для приложений, интенсивно использующих данные, большие объемы данных приводят к снижению производительности при использовании LocalStorage.
Все функции LocalStorage синхронные операции. Поэтому, если вы сохраняете или извлекаете большой кусок данных, JavaScript должен завершить эту операцию LocalStorage, прежде чем он сможет выполнить другой код.
Помните, что при сохранении больших объектов JSON стоимость увеличивается. Функции JSON.stringify() и JSON.parse() также являются синхронными. Они будут блокировать выполнение JavaScript, пока они не будут завершены.
Никогда не храните конфиденциальную информацию в LocalStorage. Это включает пароли, ключи API, токены аутентификации, такие как JWT, и финансовую информацию, такую как номера кредитных карт, и многие другие.
Помните, что каждый файл JavaScript, загруженный в ваш домен, имеет доступ к LocalStorage. Если вредоносный код JavaScript добавлен вами или вашими зависимостями, они могут получить пользовательские данные или токены, которые вы используете для аутентификации с помощью API.
Всегда храните конфиденциальные данные на сервере.
Вывод
LocalStorage - это хранилище данных, доступное в браузерах. Данные хранятся в виде пар ключ / значение строк, и каждый домен имеет доступ к своему LocalStorage.
При хранении объектов JavaScript, убедитесь , что правильно преобразовать их в строку с JSON.stringify() перед сохранением. Как извлечь данные, конвертировать их в объект с JSON.parse() .
При использовании LocalStorage, избегать обработки больших объемов данных, так как это может привести к снижению производительности, так как его функции являются синхронными.
Читайте также: