Web Analytics Made Easy - StatCounter
Главная Блог Разница между localStorage и sessionStorage

Разница между localStorage и sessionStorage

Разница между localStorage и sessionStorage

Введение

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

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

В этой статье мы попытаемся понять разницу между localStorage и sessionStorage.

Что такое localStorage?

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

Синтаксис

// Save data to localStorage
localStorage.setItem('key', 'Value');
 
// Get saved data from localStorage
let lastname = localStorage.getItem('key');
 
// Remove saved data from localStorage
localStorage.removeItem('key');
 
// Remove all saved data from localStorage
localStorage.clear();

Что такое sessionStorage?

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

Синтаксис

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
 
// Get saved data from sessionStorage
let lastname = sessionStorage.getItem('key');
 
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
 
// Remove all saved data from sessionStorage
sessionStorage.clear();

Разница между localStorage и sessionStorage

localStorage

  • Данные, хранящиеся в localStorage, не имеют срока годности и очищаются только с помощью JavaScript или очистки кеша браузера / локально сохраненных данных.
  • Предел хранилища является максимальным из трех.
  • Данные, хранящиеся в localStorage, сохраняются до тех пор, пока явно не будут удалены. Внесенные изменения сохраняются и доступны для всех текущих и будущих посещений сайта.
  • Он работает с политикой одинакового происхождения (same-origin policy). Таким образом, сохраненные данные будут доступны только из одного источника.

sessionStorage

  • Хранит данные только для сеанса, что означает, что данные хранятся до закрытия браузера (или вкладки).
  • Данные никогда не передаются на сервер.
  • Изменения доступны только для каждого окна (или вкладки в браузерах, таких как Chrome и Firefox). Внесенные изменения сохраняются и доступны для текущей страницы, а также для будущих посещений сайта в том же окне. После закрытия окна хранилище удаляется.

Заключение

localStorage и sessionStorage выполняют аналогичные задачи, но с некоторыми очень важными различиями.

источник Difference between localStorage and sessionStorage
иллюстрация esquiremag.ph

Раз в неделю мы отправляем дайджест с самыми популярными статьями. Подпишитесь на наши новости и мы сделаем для вас бесплатно аудит вашего сайта.