Сохранение данных

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

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

let storage = window.localStorage;

Объект localStorage содержит следующие методы:

setItem(<Ключ>, <Значение>) — сохраняет данные в хранилище. Ключ и значение должны быть строками;
getItem(<Ключ>) — возвращает значение, соответствующее указанному ключу. Если элемент с таким ключом отсутствует, то метод вернет значение null;
key(<Индекс>) — возвращает название ключа, расположенного по указанному индексу. Получить количество ключей позволяет свойство length. Пример перебора всех элементов:

let storage = window.localStorage;
for (let i = 0; i < storage.length; i++) {
   console.log(`${storage.key(i)} => ` + 
               `${storage.getItem(storage.key(i))}`);
}

Можно также воспользоваться циклом for...in:

for (const key in storage) {
   if ( storage.hasOwnProperty(key) ) {
      console.log(`${key} => ${storage.getItem(key)}`);
   }
}

Или циклом for...of совместно с методом keys():

let keys = Object.keys(storage);
for (const key of keys) {
   console.log(`${key} => ${storage.getItem(key)}`);
}

removeItem(<Ключ>) — удаляет элемент, соответствующий указанному ключу;
clear() — удаляет все элементы из хранилища.

Пример использования локального хранилища приведен в листинге 9.1.

Листинг 9.1. Локальное хранилище

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self' 'unsafe-inline'">
   <title>Локальное хранилище</title>
</head>
<body>
   Ключ<br>
   <input type="text" id="txt1"><br>
   Значение<br>
   <input type="text" id="txt2"><br>
   <input type="button" id="btn1" value="Показать данные"><br>
   <input type="button" id="btn2" value="Сохранить данные"><br>
   <input type="button" id="btn3" value="Удалить все данные">
   <script>
      let btn1 = document.getElementById('btn1');
      btn1.addEventListener('click', (e) => {
         let storage = window.localStorage;
         console.log(storage);
         for (let i = 0; i < storage.length; i++) {
            console.log(`${storage.key(i)} => ` + 
                        `${storage.getItem(storage.key(i))}`);
         }
      });
      let btn2 = document.getElementById('btn2');
      btn2.addEventListener('click', (e) => {
         let txt1 = document.getElementById('txt1');
         let txt2 = document.getElementById('txt2');
         if (txt1.value !== '' && txt2.value !== '') {
            let storage = window.localStorage;
            storage.setItem(txt1.value, txt2.value);
            console.log('Данные сохранены');
            txt1.value = '';
            txt2.value = '';
            txt1.focus();
         }
         else {
            console.log('Поле не заполнено');
         }
      });
      let btn3 = document.getElementById('btn3');
      btn3.addEventListener('click', (e) => {
         window.localStorage.clear();
         console.log('Данные удалены');
      });
   </script>
</body>
</html>