JavaScript метод Storage.key()

Определение и применение

JavaScript метод key() объекта Storage при передаче целого нумерованного значения числа n возвращает имя n-го ключа в хранилище (объекта Storage). Порядок ключей определяется производителем браузера, по этой причине на него не следует полагаться.

Поддержка браузерами

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`key()`	Да	Да	Да	Да	8.0	Да

JavaScript синтаксис:

const keyName = localStorage.key(index);
const keyName = sessionStorage.key(index);

index - Integer
localStorage, sessionStorage - Storage

Версия JavaScript

HTML Living Standard

Значения параметров

Параметр	Описание
keyName	Целое число, представляющее номер ключа, имя которого вы хотите получить. Первое имя ключа представлено индексом 0. Обязательный параметр.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование методов key() и setItem() объекта Storage</title>
	</head>
	<body>
		<button onclick = "showKeys()">Show keys</button> <!-- добавляем атрибут событий onclick -->
		<span id = "info"></span>
		<script>
	function showKeys() {
	  const info = document.getElementById("info"); // производим поиск элемента по id и инициализируем переменную

	  for(let i = 0; i < 5; i ++) { // создаем цикл с пятью итерациями
	    let key = "demo_key_" + i; // инициализируем строковую переменную
	    let val = i; // инициализируем переменную со значением i
	    try { // пытаемся выполнить код
	      sessionStorage.setItem(key, val); // добавляем ключ и значение в хранилище сессии
	    } catch (error) { // перехватываем и обрабатываем ошибку
	      info.innerHTML = "Произошла ошибка " + error.message; // изменяем содержимое элемента
	    }
	  }
    
	  for(let i = 0; i < sessionStorage.length; i++) { // проходим циклом по всем элементам хранилища
	    let currentKeyValue = sessionStorage.key(i); // возвращает имя ключа по определенному индексу в хранилище
	    info.innerHTML += "	<p>Ключ под индексом " + i + " равен	<b>" + currentKeyValue + "</b></p>"; // добавляем содержимое элементу
	  }
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая:

Инициализирует переменную, которая содержит ссылку на элемент с определенным глобальным атрибутом id.
С использованием цикла и метода setItem() добавляем пять ключей и значений в хранилище сессии (sessionStorage). Обратите внимание, что мы используем конструкцию try...catch, если по каким-то причинам произойдет ошибка, то мы её перехватим, а информацию о ней добавим в качестве нового текстового содержимого элемента <span>.
После этого с помощью цикла и свойства length объекта Storage мы проходим по всем элементам хранилища сессии и с помощью метода key() выводим все их имена путем добавления содержимого элементу <span> на каждой итерации цикла.

Результат нашего примера:

Пример использования методов key() и setItem() объекта Storage

JavaScript Storage