localStorage.key() — отримати ключ сховища за номером

Загальний опис

key — це метод, який використовується для отримання імені ключа на основі його індексу в об'єкті сховища (localStorage або sessionStorage). Метод дозволяє працювати з елементами сховища без необхідності знати їхні конкретні ключі, що може бути корисно при переборі всіх елементів у сховищі.

Синтаксис:

storage.key(index);

• index — це індекс, за яким знаходиться потрібний ключ у сховищі. Це число, яке вказує на порядок елемента, починаючи з нуля.
• Повертається ключ (як рядок), що відповідає зазначеному індексу. Якщо індекс виходить за межі доступних елементів, метод повертає null.

Приклад використання:

Уявімо, що у вас є кілька елементів у сховищі, і ви хочете отримати всі їхні ключі:

localStorage.setItem('name', 'Alice');
localStorage.setItem('age', '30');
localStorage.setItem('city', 'Kyiv');

for (let i = 0; i < localStorage.length; i++) {
  console.log(localStorage.key(i)); // Виведе 'name', 'age', 'city'
}

У цьому прикладі метод key(i) використовується для отримання всіх ключів у порядку їх індексів. Зазначте, що порядок збереження елементів у сховищі є важливим при виклику методу через індекси.

Пояснення:

Метод key дозволяє ефективно перебирати всі елементи у сховищі без необхідності зберігати кожен ключ вручну. Це дуже зручно, коли потрібно працювати з великими обсягами даних, або якщо ви хочете динамічно звертатися до ключів, не знаючи їх точні назви.

правити

Порада

Якщо вам потрібно очистити сховище, але ви хочете зберегти певні ключі, ви можете використовувати key для визначення і виключення елементів, які не повинні бути видалені.

автор: Bond правити

Порада

Якщо ви працюєте з великим набором даних, важливо пам'ятати, що localStorage зберігає дані у порядку їх додавання. Якщо порядок даних має значення для вашого додатку, використання key(index) дозволяє вам отримувати елементи в потрібному порядку.

автор: Bond правити

Порада

Використовуйте key разом з іншими методами сховища, такими як setItem або getItem, для більш складних операцій. Наприклад, ви можете перебирати ключі в циклі і динамічно зберігати або отримувати їх значення.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

storage.key(index);

Повернення

key

Повертає ключ (ім'я) елемента у вигляді рядка за його індексом у сховищі.

Цей метод отримує ключ елемента за вказаним індексом і повертає його, якщо він існує. Якщо індекс виходить за межі доступних елементів у сховищі, метод поверне null.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	4	3.5	4	10.5	12	8

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	6	3.2

Підтримка: серверні переглядачі

Переглядач
	1.10

Приклади

+ запропонувати свій приклад у пісочниці

for (let i = 0; i < localStorage.length; i++) {
  console.log(`Ключ ${i}: ${localStorage.key(i)} - Значення: ${localStorage.getItem(localStorage.key(i))}`);
}

function loadData() {
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    if (key === 'userData') {
      const userData = JSON.parse(localStorage.getItem(key));
      console.log('Дані користувача знайдені:', userData);
    }
  }
}

<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++) {if (window.CP.shouldStopExecution(0)) break;
    const key = localStorage.key(i);

    // Додаємо кожен ключ до списку
    const listItem = document.createElement('li');
    listItem.textContent = key;
    keyList.appendChild(listItem);
  }window.CP.exitedLoop(0);
}

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