что такое local storage
LocalStorage в JavaScript: подробное руководство
Общие сведения о localStorage и sessionStorage
LocalStorage и sessionStorage – это веб-хранилища, находящиеся в браузере пользователя и предназначенные для хранения данных.
Хранение информации в этих объектах осуществляется в формате «ключ-значение». Ключ и значение – это всегда строки.
Т.е., по сути, каждое хранилище представляет собой вот такой объект:
Если в качестве значения указать не строку, а какой-то другой тип данных, например, объект, то он будет, перед тем как туда записан, автоматически преобразован в строку (т.е. так как будто мы для него явно вызвали метод toString() ).
Таким образом, в localStorage и sessionStorage :
Где можно увидеть эти хранилища?
Например, в Google Chrome для этого необходимо открыть «Инструменты разработчика», перейти на вкладку «Application». Здесь они находятся на левой панели в разделе «Storage». При выборе источника вы увидите какие данные содержатся соответственно в sessionStorage и localStorage.
sessionStorage vs localStorage
SessionStorage хранит данные только во время текущей сессии (для вкладки, пока она открыта). Закрытие вкладки или браузера приводит к очищению этих данных. При этом данные сохраняются при обновлении страницы или отображение в этой вкладке другой страницы из этого же источника.
localStorage vs cookies
Cookie и localStorage используются для хранения информации в браузере.
Но что лучше использовать в том или ином случае? Чтобы в этом вопросе ориентироваться необходимо знать различия между ними:
Безопасность данных
Хранилище localStorage привязана к источнику (домену, протоколу и порту). Данные, находящиеся в некотором источнике, доступны только на страницах этого же источника. К данным другого источника обратиться нельзя.
SessionStorage ограничена вообще одной вкладкой браузера. Это означает, что с помощью JavaScript нельзя получить доступ к данным другой вкладки даже если она имеет тот же источник.
Работа с localStorage и sessionStorage
Для работы с localStorage и sessionStorage нам доступен одинаковый набор свойств и методов:
Событие storage
Данное событие возникает на объекте window :
Создадим пример, который будет следить за изменениями в localStorage и обновлять в соответствии с ними данные на страницах.
Для этого создадим две страницы (например, «page-1.html» и «page-2.html») и поместим в них следующий код:
Примеры использования localStorage
Кроме указанных методов, можно также использовать квадратные скобки:
2. Удалим все элементы из хранилища localStorage:
3. Переберём все ключи, находящиеся в localStorage :
4. Пример, в котором сохраним объект в localStorage:
5. Проверим поддерживает ли браузер веб-хранилища?
6. Попробуем добавить ключ в localStorage, но если в хранилище закончилось место (QUOTA_EXCEEDED_ERR), то выведем в консоль сообщение об этом:
7. Добавим дату срока действия к элементам, которую затем будем использовать для их очистки (удалять те из них дата срока действия которых превышает текущую):
Задачи
2. Сохранить данные формы в хранилище, а затем восстановить их при перезагрузки страницы.
Почему не стоит использовать LocalStorage
Привет, Хабр! Представляю вашему вниманию перевод статьи «Please Stop Using Local Storage» автора Randall Degges.
Все больше разработчиков используют localStorage для хранения данных, в том числе и конфиденциальных, даже не подозревая, что тем самым подвергают свои сайты взлому. Именно поэтому я призываю отказаться от такой практики, и в этой статье постараюсь аргументированно обосновать свою точку зрения.
Введение
Итак, localStorage — новая особенность HTML5, позволяющая хранить любую информацию в пользовательском браузере благодаря JavaScript. Это старый добрый JS-объект, в который можно добавлять и удалять пары ключ/значение. Давайте посмотрим на пример небольшого кода:
Запустив этот код на тестовой HTML-странице, мы увидим в alert-окне фразу «Петя предпочитает чёрный цвет». Если же зайти в инструменты разработчика, предварительно закомментировав строки с удалением данных, то можно убедиться, что оба значения сохранились в локальном хранилище вашего браузера.
Теперь вас может заинтересовать следующий вопрос: есть ли способ использовать локальное хранилище так, чтобы сохраненные данные автоматически удалялись? К счастью, разработчики HTML5 позаботились об этом, добавив глобальный объект sessionStorage, работающий точно так же, как и localStorage, за исключением одного: все хранящиеся в нем данные удаляются, когда пользователь закрывает вкладку браузера.
Преимущества
Несмотря на то, что весь смысл этой статьи заключается в том, чтобы отговорить вас использовать localStorage, у него все же есть ряд преимуществ.
Во-первых, это чистый JavaScript! Одна из неприятных вещей, касающихся cookies (которые, по сути, являются единственной реальной альтернативой локальному хранилищу) заключается в том, что они должны быть созданы сервером. Ужас, ведь работа с веб-серверами скучна и трудоёмка. Если вы создаете статичный сайт (например, SPA), то использование localStorage позволит ему работать без какого-либо бекенда. Это довольно мощная концепция и одна из основных причин, по которым такая практика популярна среди разработчиков.
Ещё одно достоинство заключается в том, что localStorage располагает как минимум 5 Мб для хранения данных (этот размер поддерживается всеми основными веб-браузерами), что на порядок больше, чем у cookie-файлов (
4 Кб). Это дает весомое преимущество, если есть необходимость кэшировать относительно большой объём данных приложения в браузере для последующего использования.
Недостатки
У localStorage очень простое API, многие разработчики даже не представляют, насколько оно простое. Рассмотрим подробнее:
Выходит, что localStorage является хорошим инструментом только при соблюдении ряда условий.
Безопасность
Дело вот в чем: большинство минусов локального хранилища незначительны. Но вопрос безопасности — решающий фактор, поэтому поговорим о нем более подробно.
Итак, localStorage НЕБЕЗОПАСЕН! Совсем! Каждый, кто использует его для хранения конфиденциальных данных, поступает неправильно.
Давайте разберемся, что понимается под конфиденциальными данными:
— Идентификаторы пользователей
— Идентификаторы сессий
— JWT (JSON Web Token)
— Персональная информация
— Информация о кредитной карте
— API-ключи
— Любая другая информация, которую вы бы не стали публиковать публично
LocalStorage разрабатывался не как безопасный механизм хранения данных в браузере, а как простое хранилище ключей и значений с целью облегчения создания небольших сайтов/веб-приложений. И все. Что, по вашему, самое опасное в мире? Верно! JavaScript. Поэтому, когда захотите сохранить что-нибудь важное в локальном хранилище, представьте, что хотите спрятать секретнейшую информацию в самом ненадежном сейфе на планете. Не лучшая идея.
На самом деле проблема заключается в межсайтовом скриптинге (XSS). Не хочу грузить вас подробным объяснением этой уязвимости, поэтому постараюсь объяснить вкратце: если хакер сможет запустить JavaScript-код на вашем сайте, то он запросто вытащит всю информацию из localStorage и отправит её на свой сервер, тем самым заполучив, например, данные о пользовательской сессии.
Вы можете возразить: «Да ну? Мой сайт безопасен. Никто не сможет запустить какой-либо скрипт на моем сайте». И вот тут загвоздка. В теории вы абсолютно правы, однако на деле этого фактически невозможно достичь. Давайте разберемся, почему.
Наверняка ваш сайт содержит скрипты, которые загружаются с других серверов. Cамыми распространенными вариантами являются ссылки на:
— Bootstrap
— jQuery
— Vue, React, Angular и прочие
— Google Analytics
Ну и так далее. Тогда есть вероятность того, что злоумышленник сможет запустить скрипт на вашем сайте. Представим, что он содержит следующий код:
Предположим, что awesomejslibrary.com подвергся атаке, и minifed.js скрипт был так же изменен. В этом случае появляется риск того, что скрипт соберет все данные из localStorage и отправит их на специально созданный для хранения украденной информации API. Выходит, что хакеры украли данные пользователя, при этом ни он, ни вы (как разработчик), не узнаете об этом. Плохой вариант.
Мы все частенько задумываемся над тем, что все js-скрипты нужно размещать локально у себя на сервере, однако на практике такое происходит редко. Во многих компаниях маркетологи могут напрямую вносить изменения на сайт через WYSIWYG-редакторы и прочие инструменты. Отсюда возникает вопрос: вы правда уверены, что нигде на вашем сайте не используется сторонний JS? Я отвечу за вас: нет. Поэтому, чтобы снизить риск утечки пользовательской информации, не храните конфиденциальные данные в localStorage.
Про токены
Хоть мне и кажется, что я достаточно убедительно объяснил, почему не стоит хранить конфиденциальные данные в локальном хранилище, отдельно стоит разъяснить ситуацию с JSON Web Token (JWT). Многие разработчики, которые хранят JWT в localStorage, не понимают, что это, по сути, то же самое, что и имя пользователя / пароль.
Если хакеры скопируют эти токены, то смогут отправлять запросы на ваш сервер, и вы об этом никогда не узнаете. Поэтому обращайтесь с ними так же, как с данными кредитной карты или паролем, а именно — не храните в localStorage, вопреки тысячам туториалов, видео на Youtube и даже курсам программирования в университетах. Это неправильно! Если кто-то советует вам хранить токены в локальном хранлище для аутентификации, покажите им эту статью.
Альтернативы
Итак, после того, как мы убедились, что localStorage — далеко не идеальное решение для хранения информации, время познакомиться с альтернативными вариантами.
Конфиденциальные данные
Для хранения таких данных единственным верным решением является сессия на стороне сервера. Алгоритм следующий:
Эта простая и, что самое главное, безопасная модель. И, разумеется, с помощью нее можно масштабировать проект любого уровня.
Данные, отличные от строк
Если вам необходимо хранить информацию, которая не является конфиденциальной и которая представляет собой что-то сложнее строк, то лучшее решение для этого — IndexedDB. Это транзакционная система БД с низкоуровневым API, являющаяся хорошим вариантом для хранения различных данных (включая файлы/blobs) прямиком в браузере. Более подробную информацию можно получить из гайда от Google.
Оффлайн-данные
Для обеспечения работы приложения без подключения к интернету наилучшим решением будет связка IndexedDB с Cache API (является частью Service Workers), благодаря которой возможно кэширование всех необходимых для корректной работы ресурсов. Отличный туториал по использованию от Google — здесь.
Вывод
Надеюсь, теперь вы понимаете (понимаете ведь?), почему далеко не всегда стоит использовать localStorage. Если вам нужно хранить данные, которые являются публичными, не используются в высокопроизводительных приложениях, точно не займут более 5 Мб и состоят только из строк, то локальное хранилище станет хорошим инструментом для ваших целей.
Во всех остальных случая — не используйте локальное хранилище! Используйте альтернативные решения.
И пожалуйста, я вас просто умоляю, не храните информацию о сессии (вроде JSON Web Token) в localStorage. Это сделает ваш сайт уязвимым для многочисленных атак, которые навредят пользователям.
P.S. Для тех, кто задался вопросом, почему я не упомянул Content Sequiriy Policy (CSP) как способ защиты от XSS. Причина проста: это не поможет в ситуации, которую я описал. Даже если вы используете CSP для проверки всех сторонних доменов, откуда подключаете JavaScript, это не поможет, если сайт из белого списка будет взломан.
P.P.S. Subresource integrity, к сожалению, тоже не является решением проблемы. Для большинства маркетинговых инструментов, рекламных сетей и т.д. (которые являются наиболее распространёнными сторонними скриптами) subresource integrity почти никогда не используется, поскольку поставщики этих скриптов частенько их меняют для расширения функционала и прочих вещей.
Перевод статьи Please stop using Local Storage.
Опубликовано с разрешения автора.
Хранение данных в браузере с LocalStorage
В первые дни Интернета сохранение данных было возможно только на сервере. В настоящее время благодаря использованию LocalStorage мы можем хранить данные на клиентах, таких как браузеры и мобильные приложения, без связи с внутренним приложением.
В этой статье мы обсудим, как разработчики могут хранить данные на клиенте с помощью файлов cookie, и как LocalStorage улучшил этот опыт. Затем мы рассмотрим функции, которые хранят и извлекают данные из LocalStorage. Наконец, мы обсудим, когда целесообразно использовать LocalStorage.
Хранение данных в браузере с помощью файлов cookie
Все куки отправляются на сервер, когда HTTP-запрос сделан. Файлы cookie, которые вы создаете с помощью JavaScript, также будут отправляться на сервер при выполнении HTTP-запроса. Это означает, что приложение сервера может непреднамеренно изменить файл cookie, в результате чего ваше клиентское приложение будет работать непредвиденно.
С помощью файлов cookie вы можете хранить максимум 4 КБ данных на клиенте. Для современных интерфейсных приложений этого может быть недостаточно.
Давайте посмотрим, как LocalStorage позволяет нам создавать и хранить данные на стороне клиента, с гораздо большим объемом памяти, чем предоставляют файлы cookie.
Что такое LocalStorage?
Наличие LocalStorage для каждого домена не позволяет вредоносному JavaScript, размещенному на других сайтах, манипулировать или читать данные наших клиентов, которые используются нашим доменом.
Каждый домен может хранить до 5 МБ данных в LocalStorage. Кроме того, наши данные не отправляются на сервер при выполнении HTTP-запроса.
Данные в LocalStorage не имеют срока годности. Его можно удалить с помощью JavaScript или очистив кеш браузера.
Теперь, когда мы знаем, что такое LocalStorage, давайте использовать его API для управления данными в браузере.
Как использовать LocalStorage
Мы можем использовать следующие методы для глобального объекта localStorage для управления данными на стороне клиента:
SetItem()
Используйте функцию setItem() для сохранения элемента в LocalStorage. Эта функция принимает ключ в качестве первого аргумента и значение в качестве второго аргумента. Как упоминалось ранее, оба должны быть строками.
В консоли вашего браузера добавим элемент в наш localStorage :
GetItem()
Используйте функцию getItem() для извлечения данных из LocalStorage. Эта функция берет ключ, который использовался при сохранении данных в качестве аргумента.
В вашей консоли давайте восстановим и распечатаем значение, которое было сохранено ранее с помощью setItem() :
Ваша консоль должна печатать «JavaScript».
removeItem()
Попробуйте это в вашей консоли, чтобы удалить данные, сохраненные с setItem() :
Чтобы подтвердить, что он был удален, попробуйте получить его еще раз:
Консоль будет выводить «null» при запросе значения с помощью функции getItem() всякий раз, когда не сможет получить элемент.
clear()
Чтобы удалить все данные, хранящиеся в LocalStorage, используйте функцию clear() :
Функция key() позволяет извлечь ключ элемента, сохраненного в LocalStorage по его индексу. Браузер создает целочисленный индекс для каждого элемента, добавленного в LocalStorage.
Поскольку мы не генерируем этот индекс, нам не следует использовать этот индекс для непосредственного получения ключей. Однако мы можем использовать эту функцию, чтобы получить все ключи, хранящиеся в LocalStorage:
Теперь, когда мы рассмотрели все функции для управления данными в браузере пользователя, давайте рассмотрим особый случай сохранения сложных объектов вместо строковых данных.
Хранение объектов в LocalStorage
LocalStorage может использовать только строки для своих ключей и значений. Если мы пытаемся сохранить любой другой тип данных, он преобразует его в строку перед сохранением. Это может привести к неожиданному поведению, когда мы хотим сохранить объекты JavaScript.
Давайте создадим объект person в консоли браузера и сохраним его в LocalStorage:
Теперь setItem() преобразовал объект person в строку. Когда мы получаем person как в примере ниже:
Наша консоль браузера покажет это:
Чтобы правильно хранить объекты JavaScript в LocalStorage, нам сначала нужно преобразовать наш объект в JSON строку.
Давайте сохраним объект person после его строкового преобразования:
Чтобы извлечь эти данные как объект, нам нужно сделать две вещи. Во-первых, нам нужно использовать getItem() для извлечения из LocalStorage. Затем нам нужно преобразовать JSON строку в объект JavaScript.
Давайте начнем с того, что возьмем элемент из LocalStorage:
Теперь преобразуйте строку LocalStorage в объект с помощью JSON.parse() и выведете его в консоли браузера:
Запуск этого кода даст вам следующий вывод:
Теперь, когда у нас есть стратегия расширения использования 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: как работать с веб-хранилищем
В нашей сегодняшней статье мы разберемся, что такое localStorage. LocalStorage — это свойство, открывающее доступ к специальному объекту Storage (хранилище). Его используют для получения информации из локального хранилища. Данные хранятся там неограниченный период и могут быть удалены только при помощи JavaScript.
Эти данные характерны для протокола веб-страницы: это ключи и значения в формате строк (даже целочисленные значения ключей будут преобразовываться в строки).
Информация в localStorage не стирается после обновления страницы или когда браузер был закрыт и запущен снова.
Проще говоря, localStorage – это объект в браузере, которым мы можем воспользоваться. На языке JS он представляет собой свойства глобального объекта браузера (то есть — window, окна).
У него есть аналог — sessionStorage, который отличается только тем, что в нем хранятся данные для одной вкладки (значения сотрутся после ее закрытия).
Синтаксис выглядит вот так:
Из исключений свойства можно отметить SecurityError. Это означает, что запрос к веб-хранилищу выполняется без разрешения или источник для хранения не считается верной комбинацией схемы, хоста и порта.
Как работать с localStorage
Можно использовать такие методы и свойства:
Например, попробуем добавить данные с помощью 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 в самых разных проектах. У этой технологии хорошая стандартизация и поддержка, а еще важно, что со временем она развивается и улучшается.
Простой метод измерения реальной скорости загрузки страниц у посетителей сайта
Как можно закэшировать данные и выиграть в производительности
Как работает Server-Sent API с примерами
Примеры применения Javascript в Nginx’e
Как просто сделать удобный дебаг и не лазить в код или как бородатые хакеры перехватывают ajax-запросы, нарушая вашу безопасность.
В своем блоге индийский разработчик Шашват Верма (Shashwat Verma) рассказал, как преобразовать веб-сайт или веб-страницу в прогрессивное веб-приложение (PWA).