API веб-хранилища на стороне клиента

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

Что такое веб-хранилище на стороне клиента?

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

Что такое политика одинакового происхождения?

Политика одинакового происхождения — это механизм безопасности, для которого сайт должен иметь одинаковые протокол, хост и порт, чтобы подчиняться этим правилам. Давайте рассмотрим несколько примеров, чтобы понять, что такое политика одинакового происхождения.

Рассмотрим https://example.com для понимания политики одинакового происхождения

  • https://example.com/home.html — подчиняется политике одинакового происхождения, так как меняется только путь.

Типы веб-хранилищ на стороне клиента

Существует два типа веб-хранилищ на стороне клиента. Это

  • Локальное хранилище
  • сеансовое хранилище

Рассмотрим их сходства и различия.

Локальное хранилище и сеансовое хранилище

Локальное хранилище и сеансовое хранилище имеют некоторые сходства, например

  • Оба являются объектом объекта окна.
  • Оба используются для хранения данных.
  • Оба имеют одинаковые типы методов для использования.
  • Оба не зависят от браузера (т.е. данные, хранящиеся в Chrome, не могут быть доступны в firefox).
  • Оба хранят данные в виде пары ключ-значение.
  • Оба хранилища сохраняют данные при обновлении страницы.

Локальное хранилище против сеансового хранилища

В локальном хранилище,

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

В сеансовом хранилище,

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

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

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

Использование локального хранилища,

//For setting the data: 
localStorage.setItem('name', ' Manikandan')

//For getting the data:
localStorage.getItem('name')

//For removing the data:
localStorage.removeItem('name')

//For clearing all the data
localStorage.clear()
Войдите в полноэкранный режим Выйти из полноэкранного режима

Чтобы использовать сеансовое хранилище,

//For setting the data: 
sessionStorage.setItem('name', ' Manikandan')

//For getting the data:
sessionStorage.getItem('name')

//For removing the data:
sessionStorage.removeItem('name')

//For clearing all the data
sessionStorage.clear()
Войдите в полноэкранный режим Выйти из полноэкранного режима

Следует отметить

При хранении строки

Когда вы попытаетесь сохранить объекты в API веб-хранилища, вы получите следующий результат

//For setting the data: 
localStorage.setItem('name',{firstName:"Manikandan",lastName:"Subramaniam"})

//For getting the data:
localStorage.getItem('name')
// The output will be 
[object Object]
Войти в полноэкранный режим Выйти из полноэкранного режима

Это происходит потому, что API веб-хранилища могут хранить только строки, поэтому они пытаются преобразовать объект в строку и сохранить его как [объект Object]. Таким образом, при хранении объекта вы должны преобразовать его в строку, а при чтении — обратно в объект. Рассмотрим пример.

//For setting the data: 
localStorage.setItem('name',JSON.stringify({firstName:"Manikandan",lastName:"Subramaniam"}))

//For getting the data:
JSON.parse(localStorage.getItem('name'))
// The output will be 
{
    "firstName": "Manikandan",
    "lastName": "Subramaniam"
}
Вход в полноэкранный режим Выход из полноэкранного режима

Поведение в режиме инкогнито/приватном режиме

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

Резюме

  • Мы узнали о веб-хранилище на стороне клиента
  • Политика одинакового происхождения.
  • Локальное хранилище и сеансовое хранилище.
  • Как использовать и на что обратить внимание.

Ресурсы

  • MDN — Веб-хранилище
  • MDN — Политика одинакового происхождения

Надеюсь, что этот блог помог вам разобраться в Client-side Web storage APIs. Пожалуйста, поделитесь своими отзывами.

Оцените статью
Procodings.ru
Добавить комментарий