<header>
  <h2 class="title">Storage - key() метод</h2>
  <p class="description">Додавайте елементи в сховище та переглядайте їх за індексами.</p>
</header>
<main>
  <div class="result">
    <form id="storageForm">
      <input type="text" id="keyInput" placeholder="Введіть ключ" required>
      <input type="text" id="valueInput" placeholder="Введіть значення" required>
      <button type="submit">Додати в сховище</button>
    </form>
    <h3>Список ключів у сховищі:</h3>
    <ul id="keyList"></ul>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

form input, form button {
  margin: 10px;
  padding: 8px;
  font-size: 16px;
}

form button {
  background-color: #4CAF50;
  color: white;
  border: none;
}

form button:hover {
  background-color: #45a049;
}

ul {
  list-style-type: none;
  padding: 0;
}

// Отримуємо елементи сторінки
const storageForm = document.getElementById('storageForm');
const keyInput = document.getElementById('keyInput');
const valueInput = document.getElementById('valueInput');
const keyList = document.getElementById('keyList');

// Додаємо обробник для форми
storageForm.addEventListener('submit', function (event) {
  event.preventDefault();
  
  // Отримуємо ключ і значення з форми
  const key = keyInput.value;
  const value = valueInput.value;

  // Зберігаємо пару "ключ-значення" в localStorage
  localStorage.setItem(key, value);

  // Очищаємо поля вводу
  keyInput.value = '';
  valueInput.value = '';

  // Оновлюємо список ключів
  updateKeyList();
});

// Функція для оновлення списку ключів
function updateKeyList() {
  // Очищаємо поточний список
  keyList.innerHTML = '';

  // Перебираємо всі ключі у localStorage
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    
    // Додаємо кожен ключ до списку
    const listItem = document.createElement('li');
    listItem.textContent = key;
    keyList.appendChild(listItem);
  }
}

// Оновлюємо список ключів при завантаженні сторінки
updateKeyList();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.