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

НЕОБХОДИМЫЕ УСЛОВИЯ

Базовое понимание Html, CSS и Javascript поможет здесь

Ссылку на файл проекта вы можете получить здесь.

Краткое введение

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

Начиная

HTML:

Я инициализирую свой html следующим образом (с помощью Bootstrap):

<div class=”mb-3">
  <input type=”text” class=”form-control” id=”nameField”>
  <p class=”lead”>Your Name:</p>
  <button type=”submit” class=”btn btn-secondary”>Submit</button>
</div>

У нас есть поле ввода и кнопка. Мы хотим сохранить имя пользователя, и независимо от того, сколько раз мы перезагружаем страницу, мы никогда не потеряем имя человека.

JAVASCRIPT:

<script>
  const storageInput = document.querySelector(‘.storage’);
  const text = document.querySelector(‘.text’);
  const button = document.querySelector(‘.btn’);
  // Event Listener that listens to input
  storageInput.addEventListener(‘input’, name => {
  text.textContent = name.target.value
  })
</script>

Первое, что мы хотим сделать, это обновить абзац тем, что мы пишем для тега ввода, поэтому сначала мы инициализируем переменные и связываем их с элементами ввода, абзаца и кнопки.

Чтобы успешно достичь этой цели, мы должны искать прослушиватель событий ввода, а затем обновлять textContent по мере изменения поля ввода. Это очень похоже на управление и изменение состояний в React.

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

Больше JavaScript:

const saveToLocal = () => {
localStorage.setItem(‘textInput’, text.textContent)
}
button.addEventListener(‘click’, saveToLocal)

Эта функция сохраняет в локальное хранилище браузера текстовое содержимое поля абзаца. Напомним, что содержимое поля абзаца обновляется непосредственно из поля ввода.

Затем мы говорим браузеру выключить функцию после нажатия нашей кнопки.

Нажми на кнопку!

Что ты видишь? Ничего такого? И я нет.

Как тогда мы подтверждаем, что это сработало? Откройте консоль: Chrome (Ctrl + Shift + I) На панели щелкните Приложения ›Локальное хранилище и найдите имя идентификатора текста абзаца.

Обновите страницу, если хотите, и проверьте еще раз.

ЕСТЬ БОЛЬШЕ

Мы можем изменить значение абзаца при загрузке страницы, если у нас есть значение, сохраненное в нашем локальном хранилище.

Все больше и больше JavaScript

const storedInput = localStorage.getItem(‘textInput’)
   if (storageInput) { 
     text.textContent = storedInput;
   }

Здесь мы получаем значение из локального хранилища с помощью функции getItem, а затем используем условный оператор, чтобы проверить, были ли данные, сохраненные в локальном хранилище, а затем устанавливаем его значение как текстовое содержимое абзаца, который у нас есть.

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

Хранение объектов

Преимущество использования этого метода в том, что мы можем хранить различные группы и типы данных. Допустим, мы хотели сохранить эти данные:

let region = {
   city: ‘Lagos’,
   locality: true, 
   number: 8
}

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

localStorage.setItem(‘region’, region);
console.log(localStorage)

Мы регистрируем это в консоли и видим что-то вроде этого:

Глядя на природу объекта, он сохраняется в виде строки, поэтому нам нужно преобразовать ее в строку, чтобы использовать ее должным образом. Этого можно добиться, используя:

let reg_serial = JSON.stringify(region);
console.log(reg_serial);

Результат выглядит примерно так:

Поэтому вместо сохранения объекта региона мы сохраняем сериализованный объект и записываем значение в консоль:

localStorage.setItem(‘region’, reg_serial);

Чтобы получить данные и использовать их:

// Getting The Object Deserialised
let res_deserial = JSON.parse(localStorage.getItem(‘region’));
console.log(res_deserial);