Localstorage JS - сохранение данных на стороне клиента

Локальное хранилище или `localStorage` в JavaScript (JS)

Локальное хранилище или localStorage в JavaScript (JS) представляет собой особую функциональность браузера, которая позволяет веб-приложениям сохранять и извлекать данные на клиентской стороне. Вместо того чтобы отправлять данные на сервер и хранить их там, мы можем использовать localStorage для сохранения данных на локальном компьютере пользователя.

localStorage работает в паре с объектом Window, который является глобальным объектом в веб-браузерах. Объект localStorage предоставляет два метода: setItem и getItem. Метод setItem используется для сохранения данных в локальном хранилище, а метод getItem – для извлечения сохраненных данных.

Примеры кода

Давайте рассмотрим примеры кода для работы с localStorage в JavaScript. Допустим, у нас есть простая веб-страница со счетчиком, и мы хотим сохранить значение счетчика в localStorage.

<!DOCTYPE html>
<html>
<head>
  <title>LocalStorage Example</title>
</head>
<body>
  <h1>Счетчик</h1>
  <p id="counter">0</p>

  <script>
    // Получаем доступ к элементу счетчика
    const counterElement = document.querySelector("#counter");

    // Проверяем, есть ли сохраненное значение счетчика в localStorage
    if(localStorage.getItem("counterValue")){
      // Если значение есть, устанавливаем его в элемент счетчика
      counterElement.textContent = localStorage.getItem("counterValue");
    }

    // Обработчик клика на кнопку "Увеличить"
    document.querySelector("#increment").addEventListener("click", () => {
      // Увеличиваем значение счетчика
      const currentValue = Number(counterElement.textContent);
      const newValue = currentValue + 1;

      // Устанавливаем новое значение счетчика в элемент и сохраняем его в localStorage
      counterElement.textContent = newValue;
      localStorage.setItem("counterValue", newValue);
    });

    // Обработчик клика на кнопку "Сбросить"
    document.querySelector("#reset").addEventListener("click", () => {
      // Сбрасываем значение счетчика в 0 и удаляем его из localStorage
      counterElement.textContent = "0";
      localStorage.removeItem("counterValue");
    });
  </script>

  <button id="increment">Увеличить</button>
  <button id="reset">Сбросить</button>
</body>
</html>

В данном примере, при каждом обновлении страницы значение счетчика будет загружаться из localStorage, если оно было сохранено. Если же значение отсутствует, то счетчик будет установлен в значение 0.

При нажатии на кнопку "Увеличить", значение счетчика будет увеличиваться на 1, а затем сохраняться в localStorage. При нажатии на кнопку "Сбросить", значение счетчика будет сброшено до 0, и оно будет удалено из localStorage.

Как видно из примера, localStorage позволяет хранить данные на клиентской стороне и обновлять их без обращения к серверу. Это особенно полезно для сохранения пользовательских настроек, состояний приложений и других данных, которые должны сохраняться дольше, чем пока пользователь находится на странице. Однако следует помнить, что localStorage имеет ограничение на объем данных, которые можно сохранить.

Localstorage JS - сохранение данных на стороне клиента

Локальное хранилище или localStorage в JavaScript (JS)

Примеры кода

Похожие вопросы на: "localstorage js "

Локальное хранилище или `localStorage` в JavaScript (JS)