Недостаточно места в локальном хранилище html5 mega

HTML5 Web Storage – обзор веб-хранилища

Недостаточно места в локальном хранилище html5 mega
85

Веб-программирование — HTML5 — Обзор Web Storage

В интернете информацию можно сохранять в двух местах: на веб-сервере и на веб-клиенте (т.е. компьютере посетителя страницы). Определенные типы данных лучше хранить в одном из этих мест, а другие типы — в другом.

Правильным местом для хранения конфиденциальных и важных данных будет веб-сервер. Например, если вы положите какие-либо товары в свою корзину в онлайновом магазине, данные о вашей потенциальной покупке сохраняются на веб-сервере.

На вашем компьютере сохраняется лишь несколько байтов данных для отслеживания, содержащих информацию о вас (или, вернее, о вашем компьютере), чтобы веб-сервер знал, какая из корзин ваша.

Даже с новыми возможностями HTML5 изменять эту систему нет надобности — она надежная, безопасная и эффективная.

Но хранение данных на сервере не всегда является лучшим подходом, т.к. иногда легче хранить второстепенную информацию на компьютере пользователя.

Например, имеет смысл хранить локально пользовательские настройки (скажем, параметры, которые определяют способ отображения веб-страницы) и состояние приложения (снимок текущего состояния веб-приложения), чтобы посетитель мог продолжить его выполнение с того же самого места позже.

До HTML5 единственным способом локального хранения данных было использование механизма файлов cookies, который первоначально был разработан для обмена небольшими объемами идентифицирующей информации между веб-серверами и браузерами.

Файлы cookies подходят идеально для хранения небольших объемов данных, но модель JavaScript для работы с ними несколько неуклюжа.

Система файлов cookies также вынуждает разработчика возиться со сроками действия и бесполезно пересылать данные туда и обратно по интернету с каждым запросом страницы.

В HTML5 вводится лучшая альтернатива файлам cookies, которая позволяет легко и просто сохранять информацию на компьютере посетителя.

Эта информация может храниться на клиентском компьютере неограниченное время, не отправляется на веб-сервер (если только разработчик не сделает это сам), может быть большого объема и для работы с ней требуется всего лишь пара простых, эффективных объектов JavaScript.

Эта возможность называется веб-хранилищем (Web Storage) и особенно хорошо подходит для применения с автономным режимом работы вебсайтов, т.к. позволяет создавать самодостаточные автономные приложения, которые могут сохранять всю требуемую им информацию даже при отсутствии подключения к интернету.

Функциональность веб-хранилища HTML5 позволяет веб-странице сохранять данные на компьютере посетителя. Эта информация может быть кратковременной, которая удаляется после выключения браузера, или долговременной, которая остается доступной при последующих посещениях веб-страницы.

Сохраняемая в веб-хранилище информация в действительности сохраняется не в интернете, а на компьютере посетителя веб-страницы. Иными, словами, веб-хранилище означает хранение данных не в интернете, а хранение данных из интернета.

Существуют два типа веб-хранилищ, которые так или иначе связаны с двумя объектами:

Локальное хранилище Использует объект localStorage для хранения данных для всего веб-сайта на постоянной основе. Это означает, что если веб-страница сохранит данные в локальном хранилище, эти данные будут доступны для пользователя, когда он возвратится на эту веб-страницу на следующий день, на следующей неделе или в следующем году.

Конечно же, большинство браузеров также предоставляет пользователю возможность очистить локальное хранилище. В некоторых браузерах она реализована как стратегия “все или ничего”, и посредством ее удаляются все локальные данные, во многом подобно тому, как удаляются cookies-файлы.

(В действительности, в некоторых браузерах система cookies и локальное хранилище взаимосвязаны, так что единственным способом удалить локальные данные будет удаление cookies.

) А другие браузеры могут предоставлять пользователю возможность просмотра данных для каждого отдельного веб-сайта и удалять данные для выбранного сайта или сайтов.

Хранилище данных сеансов

Использует объект sessionStorage для временного хранения данных для одного окна или вкладки браузера.

Эти данные доступны лишь до тех пор, пока пользователь не закроет окно или вкладку, после чего сеанс заканчивается и данные удаляются.

Но данные сеанса сохраняются, если пользователь переходит на другой веб-сайт, а потом возвращается обратно при условии, что это происходит в том же окне браузера.

С точки зрения кода веб-страницы, как локальное хранилище, так и хранилище данных сеансов работают абсолютно одинаково. Разница состоит лишь в длительности хранения данных.

Использование локального хранилища предоставляет наилучшую возможность для сохранения требуемой информации для последующих посещений вебстраницы пользователем.

А хранилище сеансов служит для хранения данных, которые нужно передавать от одной страницы другой.

(В хранилище сеансов можно также хранить временные данные, используемые только на одной странице, но для этой цели прекрасно работают обычные переменные JavaScript.)

Как локальное хранилище, так и хранилище сеансов связано с доменом веб-сайта. Таким образом, если сохранить в локальном хранилище данные для страницы www.professorweb.ru/index.html, эти данные будут доступны для страницы www.professorweb.ru/contact.html, т.к. обе эти страницы имеют один и тот же домен. Но эти данные не будут доступны для страниц других доменов.

Кроме этого, т.к.

веб-хранилище расположено на компьютере (или мобильном устройстве) данного пользователя, оно связано с этим компьютером, и веб-страница, открытая на данном компьютере и хранящая данные в его локальном хранилище, не имеет доступа к информации, которую она сохранила на другом компьютере. Подобным образом веб-страница создает отдельное локальное хранилище, если вы войдете в систему под другим именем пользователя или запустите другой браузер.

Хотя спецификация HTML5 не устанавливает никаких жестких правил в отношении максимального объема хранилища, большинство браузеров ограничивают его 5 Мбайт.

В этот объем можно упаковать много данных, но его будет недостаточно, если вы хотите использовать локальное хранилище для оптимизации производительности и кэшировать в нем изображения или видео большого объема (и, по правде говоря, локальное хранилище не предназначено для таких целей).

Для хранения большого объема данных все еще развивающийся стандарт базы данных IndexedDB допускает локальное хранение намного большего объема — обычно 50 Мбайт для начала и больше, по согласию пользователя.

Сохранение данных

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

Синтаксис для сохранения фрагмента данных следующий:

localStorage[keyName] = data;

Допустим, например, что нам нужно сохранить фрагмент текста, присвоив ему имя текущего пользователя. Для этих данных мы можем использовать ключ username:

// JS localStorage[“username”] = “Ivan Petrov”;

Конечно же, сохранять фрагмент статического текста не имеет смысла. Как правило нам требуется сохранять какие-либо переменные данные, например текущую дату, результат математического вычисления или текстовые данные, введенные пользователем в поля формы. Далее приведен пример сохранения введенных пользователем текстовых данных:

Веб-хранилище Этот текст сохранится в локальном хранилище:
Этот текст сохранится в хранилище данных сессии: Сохранить Загрузить function saveData() { // Получаем значения текстовых полей var localData = document.getElementById(“localData”).value; var sessionData = document.getElementById(“sessionData”).value; // Сохраняем текст, введенный в текстовом поле, в локальном хранилище localStorage[“localData”] = localData; // Сохраняем текст, введенный в текстовом поле, в хранилище сессий sessionStorage[“sessionData”] = sessionData; } function loadData() { // Загружаем сохраненные данные из хранилищ var localData = localStorage[“localData”]; var sessionData = sessionStorage[“sessionData”]; // Отображаем эти данные в текстовых полях if (localData != null) { document.getElementById(“localData”).value = localData; } if (sessionData != null) { document.getElementById(“sessionData”).value = sessionData; } } Страница содержит два текстовых поля: для локального хранилища (вверху) и для хранилища сеансов (внизу). Нажатие кнопки “Сохранить” сохраняет текст, введенный в текстовые поля, а нажатие кнопки “Загрузить” выводит в полях соответствующие сохраненные данные.

Веб-хранилище также поддерживает менее распространенный синтаксис свойств. Согласно правилам этого синтаксиса, мы обращаемся к ячейке хранения с именем username как localStorage.username, а не localStorage[“username”]. Оба типа синтаксиса равнозначны, и использование того или другого является вопросом личного предпочтения.

Веб-хранилище не работает без веб-сервера

В своих исследованиях веб-хранилища вы можете столкнуться с неожиданной проблемой. Во многих браузерах веб-хранилище работает только для страниц, предоставленных веб-сервером.

При этом не важно, где расположен сервер, в интернете или на вашем собственном компьютере, самое главное, просто чтобы страницы не запускались с локального жесткого диска (например, двойным щелчком по значку файла страницы).

Эта особенность является побочным эффектом способа, которым браузеры выделяют место в локальное хранилище. Как ранее говорилось, браузеры ограничивают локальное хранилище для каждого веб-сайта 5 Мбайт, для чего им нужно ассоциировать каждую страницу, которая хочет использовать локальное хранилище, с доменом вебсайта.

Что же происходит, если открыть страницу, которая использует веб-хранилище, с локального жесткого диска? Все зависит от браузера. Браузер Internet Explorer, похоже, полностью утрачивает поддержку веб-хранилища. Объекты localStorage и sessionStorage исчезают, и попытка использовать их вызывает ошибку JavaScript.

В браузере Firefox объекты localStorage и sessionStorage остаются на месте и, вроде бы, поддерживаются (даже Modernizr определяет, что поддерживаются), но все, что отправляется на хранение, исчезает неведомо куда. В браузере Chrome опять же что-то другое — большая часть функциональности веб-хранилища работает как следует, но некоторые возможности (например, событие onStorage) не работают.

Подобные проблемы возникают и с использованием интерфейса File API. Поэтому вы избавите себя от многих хлопот, если поместите тестируемую страницу на тестовый сервер, чтобы избежать всех этих неопределенностей.

Поддержка веб-хранилища браузерами

Веб-хранилище является одной из наиболее поддерживаемой возможностью HTML5, с хорошим уровнем поддержки в каждом основном браузере. В таблице ниже приведены минимальные версии основных браузеров, поддерживающих веб-хранилище:

Поддержка браузерами локального хранилища и хранилища данных сеансов

БраузерIEFirefoxChromeSafariOperaSafari iOSAndroid
Минимальная версия83.55410.522

Все эти браузеры предоставляют возможность локального хранилища и хранилища данных сеанса. Но для поддержки события onStorage требуются более поздние версии браузеров, например IE 9, Firefox 4 или Chrome 6.

Самой проблемной является версия IE 7, которая не поддерживает веб-хранилище вообще. В качестве обходного решения можно эмулировать веб-хранилище посредством файлов cookies.

Это не совсем идеальное решение, но оно работает.

Хотя официального сценария для закрытия этого пробела не существует, несколько хороших отправных точек можно найти на странице HTML5 Cross Browser (в разделе “Web Storage”).

Источник: https://professorweb.ru/my/html/html5/level5/5_1.php

Зашифрованное хранилище файлов MEGA. Краткий обзор хранилища и его особенностей

Недостаточно места в локальном хранилище html5 mega
MEGA – облачное хранилище с шифрованием.

О чем эта статья и зачем вам это нужно. Эта статья о хранилище MEGA. MEGA – защищенное хранилище с шифрованием файлов. На мой взгляд это интересное решение, поэтому я решил написать об этом статью. Аналогов MEGA практически нет. У MEGA 150 миллионов зарегистрированных пользователей. Это уже серьёзно.

Вам может понадобится MEGA так как это хранилище

  • хранит ваши файлы зашифрованными, а ключи есть только у вас
  • серверы компании расположены в Новой Зеландии и подчиняются законодательству этой страны

Итого крайне сложно получить вашу информацию как физически, так и юридически. И это та особенность, которая отличает это хранилище от других. А нужна ли вам такая безопасность – решать только вам. Все ссылки будут в конце статьи.

Что предлагает MEGA

  • 15 ГБ места бесплатно (+35 ГБ “временно-бесплатно”, за участие в программах)
  • встроенное шифрование, причем ключи хранятся у вас
  • дополнительные опции в виде общения, видеозвонков и всё это тоже зашифровано (зависит от тарифа)

При входе, в верхнем меню, желательно сразу выбрать русский язык. Руссификация у MEGA неплохая.

Есть русский язык. В появившемся окне выберите его и нажмите сохранить.

Далее создаем новый аккаунт. Регистрация достаточно простая.

Регистрация проходит в одно действие.

А вот предлагаемые тарифы достаточно дорогие. Можно посмотреть увеличенную картинку с тарифами нажав на неё, но я вам и так скажу, что 700 рублей за 1ТБ в месяц – это дорого. Дорого, по сравнению с другими хранилищами.

https://www.youtube.com/watch?v=GLmUOpkLpkE

Тарифы дорогие. Остается только бесплатный.

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

Если пользователь забудет пароль, то только этот ключ восстановит доступ к его данным.

Интерфейс у MEGA достаточно простой. В отличии от других хранилищ, тут есть только базовые опции:

  • загрузка и скачивание файлов и папок

Простой интерфейс. Но есть все базовые опции.

  • создание ссылки для скачивание файла. Причем можно отправить ссылку на зашифрованный файл, а потом передать (или продать?) ключ. Или отправить ссылку на расшифрованный файл (содержащую ключ).

Интересная возможность.

Особого внимания заслуживает опция создания общих папок. То есть вы можете создать общую папку и назначить к ней права доступа. И любой пользователь MEGA сможет взаимодействовать с этой папкой. Закачивать туда файлы, скачивать их оттуда, создавать подпапки. Или несколько пользователей. И всё это зашифровано.

Общая папка. Мало того что обмен и шифрование, так ещё и бесплатное место.

Есть также и чат. Веб аналог Skype. Поддерживаются зашифрованные звонки, передача сообщений и файлов.

Основной упор в чате делается на безопасность.

Разумеется, как у всех облачных хранилищ у MEGA есть приложение для синхронизации с различными устройствами. Поддерживаются все типовые операции.

Есть всё что нужно.

Ваши файлы с компьютера (и других устройств) будут автоматически синхронизироваться с облачным хранилищем MEGA. Они будут автоматически закачиваться, скачиваться (обновляться), шифроваться в облаке и дешифроваться у вас на устройствах. И всё это “на лету”, быстро и удобно.

Ваши файлы – только ваши. А с другом обмен идет через другую папку.

Выводы

Основная идея MEGA – это хранение и обмен информацией в зашифрованном виде. Видно, что основные силы были брошены на решения данной задачи. Объективно – все основные функции у этого хранилища есть.

Но стоит признать, что некоторые удобные опции, такие как создание файлов в облаке, работа с офисными файлами из браузера, онлайн просмотр и многое другое – недоступны.

Есть и ещё один минус данного хранилища – бесплатные ограничения. На бесплатном тарифе присутствуют ограничения в скорости, при превышении квоты на передачу информации. Также стоит упомянуть и о временных квотах на место, ведь +35 ГБ бесплатно, к сожалению, это временно.

Вы можете сами посмотреть все опции хранилища MEGA на их сайте или сразу зарегистрироваться. Там все относительно просто и понятно. И отсутствие некоторых опций – это не только недостаток, а своего рода преимущество выраженное в простоте интерфейса. Попробуйте, посмотрите, поймите нужно ли вам это.

————————–

Источник: https://zen.yandex.ru/media/it_live/zashifrovannoe-hranilisce-failov-mega-kratkii-obzor-hranilisca-i-ego-osobennostei-5d3fc9a5093e5a00af3a08ed

Почему не стоит использовать LocalStorage

Недостаточно места в локальном хранилище html5 mega

Привет, Хабр! Представляю вашему вниманию перевод статьи “Please Stop Using Local Storage” автора Randall Degges.

Все больше разработчиков используют localStorage для хранения данных, в том числе и конфиденциальных, даже не подозревая, что тем самым подвергают свои сайты взлому. Именно поэтому я призываю отказаться от такой практики, и в этой статье постараюсь аргументированно обосновать свою точку зрения.

Введение

Итак, localStorage — новая особенность HTML5, позволяющая хранить любую информацию в пользовательском браузере благодаря JavaScript. Это старый добрый JS-объект, в который можно добавлять и удалять пары ключ/значение. Давайте посмотрим на пример небольшого кода:

// Два варианта добавления данныхlocalStorage.userName = “Петя”;localStorage.setItem(“favoriteColor”, “чёрный”); // После добавления в localStorage, они будут там// до тех пор, пока их явно не удалитьalert(`${localStorage.userName} предпочитает ${localStorage.favoriteColor} цвет.`); // А теперь удалим данные из хранилищаlocalStorage.removeItem(“userName”);localStorage.removeItem(“favoriteColor”);

Запустив этот код на тестовой HTML-странице, мы увидим в alert-окне фразу “Петя предпочитает чёрный цвет”. Если же зайти в инструменты разработчика, предварительно закомментировав строки с удалением данных, то можно убедиться, что оба значения сохранились в локальном хранилище вашего браузера.

Теперь вас может заинтересовать следующий вопрос: есть ли способ использовать локальное хранилище так, чтобы сохраненные данные автоматически удалялись? К счастью, разработчики HTML5 позаботились об этом, добавив глобальный объект sessionStorage, работающий точно так же, как и localStorage, за исключением одного: все хранящиеся в нем данные удаляются, когда пользователь закрывает вкладку браузера.

Преимущества

Несмотря на то, что весь смысл этой статьи заключается в том, чтобы отговорить вас использовать localStorage, у него все же есть ряд преимуществ.

Во-первых, это чистый JavaScript! Одна из неприятных вещей, касающихся cookies (которые, по сути, являются единственной реальной альтернативой локальному хранилищу) заключается в том, что они должны быть созданы сервером.

Ужас, ведь работа с веб-серверами скучна и трудоёмка. Если вы создаете статичный сайт (например, SPA), то использование localStorage позволит ему работать без какого-либо бекенда.

Это довольно мощная концепция и одна из основных причин, по которым такая практика популярна среди разработчиков.

Ещё одно достоинство заключается в том, что localStorage располагает как минимум 5 Мб для хранения данных (этот размер поддерживается всеми основными веб-браузерами), что на порядок больше, чем у cookie-файлов (~ 4 Кб). Это дает весомое преимущество, если есть необходимость кэшировать относительно большой объём данных приложения в браузере для последующего использования.

Недостатки

У localStorage очень простое API, многие разработчики даже не представляют, насколько оно простое. Рассмотрим подробнее:

  • Может содержать только строки, что делает его совершенно бесполезным, если речь идёт хоть о чем-то сложнее строк. Конечно, можно переводить все типы данных в строки, но это безобразное решение.
  • Оно синхронно. Это означает, что каждая операция, связанная с хранилищем, будет выполняться последовательно. Для сложных приложений это критично, поскольку может замедлить скорость его работы.
  • Его не могут использовать web workers. То есть, если вы создаете приложение, использующее преимущества фоновой обработки для производительности, расширение для Chrome или прочие подобные вещи, то локальным хранилищем воспользоваться, увы, не выйдет.
  • Ограничение размера хранимых данных (как выше было уже сказано, примерно 5 Мб). Это достаточно маленький лимит для приложений, которые должны хранить большой объём данных или нуждаются в возможности работы без подключения к интернету.
  • Любой JavaScript-код на странице имеет доступ к хранилищу, поскольку никакой защиты, увы, не предусмотрено. Об этом, самом главном недостатке, мы поговорим чуть позже.

Выходит, что 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, вопреки тысячам туториалов, видео на и даже курсам программирования в университетах.

Это неправильно! Если кто-то советует вам хранить токены в локальном хранлище для аутентификации, покажите им эту статью.

Альтернативы

Итак, после того, как мы убедились, что localStorage — далеко не идеальное решение для хранения информации, время познакомиться с альтернативными вариантами.



Конфиденциальные данные

Для хранения таких данных единственным верным решением является сессия на стороне сервера. Алгоритм следующий:

  • Когда пользователь логинится на вашем сайте, нужно создать уникальный индентификатор сессии и сохранить в криптографически зашифрованный куки-файл. Если вы используйте какой-либо веб-фреймворк, просто загуглите “how to create a user session using cookies” и следуйте этому руководству.
  • Убедитесь, что у cookie-библиотеки, которую использует ваш фреймворк, в настройках включено “httpOnly”. Это сделает невозможным просмотр куки-файлов браузером, что необходимо для их безопасного использования на стороне сервера. Советую прочитать статью Джеффа Этвуда для получения дополнительной информации.
  • Кроме того нужно убедиться, что в настройках указано SameSite = strict (чтобы предотвратить CSRF-атаки), а также secure = true (чтобы гарантировать передачу куки только через зашифрованное соединение)
  • При запросе пользователем сайта, используйте его сессионный идентификатор (извлеченный из куки-файла) для получения информации об аккаунте. После чего можно свободно отправлять пользователю любые связанные с этой учетной записью конфиденциальные данные без повторной проверки идентификатора сессии (разумеется, если первая проверка была пройдена)

Эта простая и, что самое главное, безопасная модель. И, разумеется, с помощью нее можно масштабировать проект любого уровня.

Данные, отличные от строк

Если вам необходимо хранить информацию, которая не является конфиденциальной и которая представляет собой что-то сложнее строк, то лучшее решение для этого — 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.
с разрешения автора.

  • Хранение данных
  • javascript
  • html5
  • localstorage
  • SPA
  • перевод с английского

Хабы:

  • Разработка веб-сайтов
  • JavaScript
  • HTML

Источник: https://habr.com/ru/post/349164/

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.