Функция веб-хранилища в HTML5 позволяет хранить некоторую информацию локально на компьютере пользователя, подобно файлам cookie. Хотя работает это быстрее и удобнее, но использование веб-хранилища не безопаснее, чем cookie. Подробнее см. Руководство по использованию cookie-файлам в PHP.

Информация, хранящаяся в веб-хранилище, не отправляется на веб-сервер, в отличие от файлов cookie, где данные отправляются на сервер с каждым запросом. Кроме того, файлы cookie позволяют хранить небольшой объем данных (около 4 КБ), тогда как веб-хранилище позволяет хранить до 5 МБ данных.

Существует два типа веб-хранилищ, которые различаются по объему и сроку службы:

  • Local storage — Локальное хранилище использует объект localStorage для постоянного хранения данных для всего вашего веб-сайта. Это означает, что сохраненные локальные данные будут доступны на следующий день, на следующей неделе или в следующем году, если вы не удалите их;
  • Session storage — Хранилище сеансов использует объект sessionStorage для временного хранения данных, для одного окна или вкладки браузера. Данные исчезают, когда сессия заканчивается, то есть когда пользователь закрывает окно или вкладку браузера.

Функция веб-хранилища HTML5 поддерживается во всех основных современных веб-браузерах, таких как Firefox, Chrome, Opera, Safari и Internet Explorer 8 и выше.

Объект localStorage

Объект localStorage хранит данные без срока годности. Каждый фрагмент данных хранится в паре ключ/значение. Ключ идентифицирует имя информации (например, first_name), а значение связывается с этим ключом (скажем, Роберт). Вот пример:

<script>
// Check if the localStorage object exists
if(localStorage) {
    // Store data
    localStorage.setItem("first_name", "Роберт");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else {
    alert("Sorry, your browser do not support local storage.");
}
</script>

Приведенный выше код JavaScript имеет следующие значения:

  • localStorage.setItem(key, value) хранит значение, связанное с ключом.
  • localStorage.getItem(key) извлекает значение, связанное с ключом

Вы также можете удалить конкретный элемент из хранилища, если он существует, передав имя ключа removeItem(), например так: localStorage.removeItem("first_name").

Однако, если вы хотите удалить все хранилище, используйте метод clear(), например localStorage.clear(). Метод clear() не принимает аргументов и просто удаляет все пары ключ/значение из localStorage сразу, поэтому тщательно подумайте, прежде чем его использовать.

Данные веб-хранилища (localStorage и sessionStorage) не будут доступны для разных браузеров. Например, данные, хранящиеся в браузере Firefox, не будут доступны в Google Chrome, Safari, Internet Explorer или других браузерах.

Объект sessionStorage

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

Давайте посмотрим следующий пример, чтобы понять, как это работает:

<script>
// Check if the sessionStorage object exists
if(sessionStorage) {
    // Store data
    sessionStorage.setItem("last_name", "Parker");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else {
    alert("Sorry, your browser do not support session storage.");
}
</script>

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.