Какие способы хранения данных в браузере существуют и как они отличаются
Что проверяют
Знаете ли вы отличия по объёму, времени жизни и по тому, уходит ли значение на сервер. Последнее важно для безопасности.
Как отвечать
- cookie: около 4 КБ, отправляются на сервер с каждым запросом к домену. Есть срок жизни и флаги
HttpOnly(недоступна из JavaScript),Secure,SameSite. Единственный вариант, который умеет работать с сервером автоматически, поэтому там держат сессию; - localStorage: примерно 5-10 МБ, живёт до явного удаления, синхронный доступ по ключу-строке. На сервер не уходит. Синхронность это минус: большая запись блокирует поток;
- sessionStorage: то же самое, но живёт до закрытия вкладки и не разделяется между вкладками;
- IndexedDB: асинхронная база с индексами и транзакциями, десятки и сотни мегабайт. Для офлайна и больших наборов;
- Cache API: хранилище ответов сети, работает вместе с сервис-воркером;
- Origin Private File System: файловый доступ для тяжёлых сценариев.
Всё это привязано к источнику (протокол, домен, порт) и недоступно другому сайту.
Про безопасность стоит сказать прямо: localStorage доступен любому скрипту на странице, поэтому токен доступа там уязвим при XSS. Cookie с HttpOnly из скрипта не читается, но требует защиты от подделки межсайтовых запросов через SameSite.
Где спотыкаются
Считают, что localStorage безопаснее cookie.
Не знают, что cookie уходят на сервер с каждым запросом, и складывают туда лишнее, раздувая трафик.
Забывают, что в приватном окне и при отключённых данных сайта обращение к хранилищу может бросить исключение.
Хранят объекты, забывая, что значения только строки, и не оборачивают JSON.parse в try/catch.