Есть ли недостатки в использовании localStorage вместо Cookies?

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

Теперь мои проекты на сайте почти всегда имеют предварительный домашний запуск через javascript (показывая modalbox), поэтому мне не нужно предпринимать никаких действий на стороне сервера. Я рассматриваю возможность использования HTML5 localStorage вместо файлов cookie с резервным копированием файлов cookie, если в браузере нет localStorage. Это хорошая идея? Каково влияние в плане удобства использования, защиты конфиденциальности и производительности веб-сайта?

Использование localStorage улучшит удобство использования для пользователей, у которых отключены файлы cookie. Но я знаю, что некоторые функции HTML5 - это только опция (например, геолокализация) в некоторых браузерах. Есть ли какие-либо ограничения для localStorage в любом браузере? Есть ли случай, когда я получу ошибку JS, если localStorage доступен, но деактивирован для моего сайта?

Ответ 1

Юзабилити

Пользователь не будет знать, используете ли вы localStorage или cookie. Если пользователь отключает файлы cookie, localStorage не будет работать.

Производительность

Между этими двумя методами нет заметной разницы в скорости.

sessionStorage

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

LocalStorage

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

Ваши вопросы

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

Обратный пример

Вы можете использовать Modernizr, чтобы проверить, доступен ли localStorage, а если нет, используйте вместо этого файл cookie.

if (Modernizr.localstorage) {
    // supports HTML5 Storage :D
} else {
    // does not support HTML5 Storage :(
}

Вы также можете отказаться от Modernizr и использовать чек typeof Storage !== 'undefined'.

Ответ 2

Сравнение LS vs cookie сравнивает яблоки с апельсинами.

Cookies и LS - совершенно разные вещи для разных целей. LS - это инструмент, который позволяет вашему клиенту (код javascript) хранить свои данные локально, не передавая его на сервер. Cookies - это инструмент для взаимодействия клиент-сервер. Каждый пункт cookie должен быть отправлен с каждым запросом.

В прошлом куки файлы часто подвергались злоупотреблениям для эмуляции локального хранилища, просто потому, что это была единственная возможность для приложения javascript писать что-либо на клиентский жесткий диск. Но, как правило, LS не заменяет файлы cookie, поэтому, если вам нужно что-то, что и клиент и сервер должны читать и писать, используйте файлы cookie, а не LS.

Ответ 3

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

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

Ответ 4

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

Файлы cookie не могут быть записаны, добавлены и прочитаны:

alert(document.cookie);
document.cookie = "nope";
alert(document.cookie);