Вы когда-нибудь сталкивались с ситуацией, когда вы вводите некоторую информацию на веб-странице, обновляете страницу, и все ваши данные исчезают? Это может расстраивать, правда? Ну, не бойтесь! В этой статье мы рассмотрим различные методы в JavaScript, позволяющие сохранять значения даже после обновления страницы. Итак, давайте углубимся и сохраним наши данные!

Метод 1: Хранение сеанса.
Один популярный метод сохранения значений после обновления страницы — использование механизма хранения сеанса, предоставляемого JavaScript. Хранилище сеансов позволяет хранить пары ключ-значение, которые сохраняются до тех пор, пока активен сеанс браузера. Вот пример того, как вы можете использовать хранилище сеансов:

// Storing a value in session storage
sessionStorage.setItem('key', 'value');
// Retrieving the stored value
const storedValue = sessionStorage.getItem('key');

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

// Storing a value in local storage
localStorage.setItem('key', 'value');
// Retrieving the stored value
const storedValue = localStorage.getItem('key');

Метод 3. Файлы cookie.
Файлы cookie существуют уже давно и обычно используются для хранения небольших объемов данных на стороне клиента. Их можно использовать для сохранения значений после обновления страницы. Вот фрагмент кода, иллюстрирующий использование файлов cookie:

// Setting a cookie
document.cookie = 'key=value; expires=Thu, 01 Jan 2099 00:00:00 UTC; path=/';
// Retrieving the cookie value
const cookies = document.cookie.split('; ');
for (const cookie of cookies) {
  const [name, value] = cookie.split('=');
  if (name === 'key') {
    const storedValue = value;
    break;
  }
}

Метод 4. Параметры URL-адреса.
Параметры URL-адреса можно использовать для передачи данных между страницами и сохранения значений после обновления. Вы можете добавлять значения к URL-адресу и читать их с помощью JavaScript. Вот пример:

// Appending a parameter to the URL
const url = new URL(window.location.href);
url.searchParams.set('key', 'value');
window.history.replaceState({}, '', url);
// Retrieving the parameter value
const searchParams = new URLSearchParams(window.location.search);
const storedValue = searchParams.get('key');

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

// Intercepting form submission
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const value = form.elements['inputName'].value;
  sessionStorage.setItem('key', value);
  // Submit the form programmatically if needed
  // form.submit();
});
// Retrieving the stored value on page load
const storedValue = sessionStorage.getItem('key');

В этой статье мы рассмотрели несколько методов сохранения значений после обновления страницы в JavaScript. Независимо от того, выбираете ли вы хранилище сеансов, локальное хранилище, файлы cookie, параметры URL-адреса или отправку формы, каждый метод предлагает свои преимущества. Примените соответствующий метод в соответствии с вашими конкретными требованиями и наслаждайтесь постоянными данными при обновлении страницы!