Сохранение данных на веб-страницах

Передача данных между HTML-страницами с использованием параметров запроса поднимает проблему видимости данных в URL-адресе. К счастью, в JavaScript и jQuery существуют альтернативные механизмы для передачи данных между страницами.

Использование объектов хранения HTML5

Чтобы решить эту проблему, HTML5 предоставляет такие объекты хранения, как sessionStorage и локальное хранилище. Эти объекты предоставляют средства временного или постоянного хранения данных в локальном хранилище браузера, что позволяет их удобно извлекать в дальнейшем.

Хранилище сеансов

Для временного хранения данных в один сеанс браузера, sessionStorage идеален. Данные, хранящиеся в sessionStorage, остаются доступными до завершения сеанса (например, когда вкладка браузера закрыта).

sessionStorage.setItem('label', 'value');
sessionStorage.getItem('label');

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

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

localStorage.setItem('label', 'value');
localStorage.getItem('label');

Преимущества объектов хранения HTML5

• Данные остаются скрытыми, что позволяет избежать проблем с видимостью в URL-адресе.
• Сохраненные значения сохраняются на нескольких страницах и даже после обновления браузера (для localStorage).
• Идеально подходит для хранения данных промежуточной формы или другой важной информации, которая должна быть разделена между страницами.