Cookie, LocalStorage или SessionStorage?

Cookie, LocalStorage и SessionStorage-все это простые способы хранения данных для хранения на стороне клиента. Cookie больше похож на старый школьный способ обработки простых данных, хранящихся на стороне клиента. В HTML5 представлено веб -хранилище, такое как LocalStorage или SessionStorage, и его также проще в использовании.

Печенье

1. Постоянство: пользователь может установить время истечения срока действия для каждого файла cookie.
2. Хранилище: Есть только около 4 КБ для целых данных cookie.
3. Трафик: Данные должны быть отправлены обратно на сервер для всех HTTP -запросов, что увеличивает трафик между клиентом и сервером.
4. Работает для старых браузеров.

LocalStorage

1. Постоянство: данные существуют до тех пор, пока они не будут удалены
2. Хранение: доступное пространство увеличивается до 5 МБ
3. Трафик: меньше трафика, потому что не все HTTP -запросы должны отправлять данные обратно на сервер
4. Домен: Данные остаются только в том же домене, что означает, что если данные хранятся на веб -сайте A, в следующий раз, когда к ним можно получить только на веб -сайте A., чтобы он понял, что здесь используется домен, это означает одно и то же поле сайта. Например, в каких разных сообщениях или разных личных страницах в Facebook, которые вы просматриваете, находятся в Facebook.com. В результате все эти страницы находятся под одной и той же доменом.

SessionStorage

SessionStorage похож на LocalStorage. Единственной разницей будет настойчивость данных. Для SessionStorage, как только пользователь покидает домен, такой как закрытие вкладок или окна, SessionStorage опустошено.

Как использовать LocalStorage и SessionStorage?

Как LocalStorage, так и SessionStorage Используйте пару ключевых значений, и их синтаксис похожи. Примеры являются примерами.

Синтаксис

//To store the data:
localStorage.setItem("key","value");

//To retrieve the data:
localStorage.getItem("key");

//To update the data (the same as to store the data):
localStorage.setItem("key","value");

//To remove one entry:
localStorage.removeItem("key");

//To clear all the data:
localStorage.clear();

Оригинал: “https://dev.to/sandy8111112004/cookie-localstorage-or-sessionstorage-4lp2”