При разработке современных веб-сайтов часто требуется сохранять данные на стороне клиента. Для этого в браузере существуют разные способы.
Сегодня рассмотрим самые распространённые 👇
▪️ Cookie
Удобны для хранения авторизационных данных или когда доступ к записанным данным нужен на сервере. Являются частью спецификации протокола HTTP и их поддерживают все браузеры. Но имеют не самый удобный интерфейс чтения и записи и ограниченный размер.
▪️ Переменные JavaScript
Самый быстрый и простой вариант. По размеру строгих ограничений нет, но если память заполнится, может сбоить. И нужно учитывать, что обновление или закрытие вкладки стирает все сохранения.
▪️ Web Storage
Простой и достаточно удобный. Данные хранятся в виде ключ-значение, название функций интуитивно понятно. Максимальный объем хранимых данных — 5 Мб. Но любой скрипт, загруженный на странице, может иметь доступ к хранилищу. Поэтому не стоит хранить там приватную информацию, например, токены авторизации.
▪️ IndexedDB
Может хранить значительный объем структурированных данных - даже файлы и большие объекты, индексирует данные для эффективного выполнения запросов. Но для использования нужно создать базу данных, таблицы и применять транзакции.
▪️ Cache API
Хранилище для сетевого уровня. Используется для кэширования сетевых запросов и ответов на них. Идеально подходит для сервис-воркеров, можно хранить сотни мегабайт и даже больше.
Подобрать свой вариант хранилища можно только методом проб и ошибок. В сложных приложениях, возможно, придётся применять несколько вариантов. Это значит, что изучать дополнительные API.
#methed_про_ит