@RubyBlack

Как вывести на страницу объект из localStorage, не зная key?

Хочу записать объект(ы) в localStorage через input и выводить их на страницу в виде списка по нажатию на кнопку. То есть, получается так, что код нужно прописывать, не зная ключа к value localStorage. И я не могу понять как это сделать. (Еще изучаю JS)
Вот код HTML:
<div class="container">
	<h1>Experience calculator</h1>
	<div class="calc-body">
		<div class="calc-item">
			<p>Hero name</p>
			<input type="text" id="input-name">
		</div>
		<div class="calc-item">
			<p>Exp to next lvl</p>
			<input type="number" id="input-next">
		</div>
		<div class="calc-item">
			<p>Current exp</p>
			<input type="number" id="input-curr">
		</div>
	</div>
	<button class="calc-accept">Accept</button>
	<div class="results">
		<ol></ol>
	</div>
</div>
<script src="js/script.js"></script>


И JS:
let inputName = document.querySelector('#input-name');
let inputExpToNext = document.querySelector('#input-next');
let inputCurrExp = document.querySelector('#input-curr');
let startButton = document.querySelector('.calc-accept');

const list = document.querySelector('ol');
list.innerHTML = '';

startButton.onclick = function () {
	let a = {
		'expToNext': +inputExpToNext.value,
		'currExp': +inputCurrExp.value,
	};
	localStorage.setItem(inputName.value, JSON.stringify(a));
};
  • Вопрос задан
  • 101 просмотр
Решения вопроса 2
Aetae
@Aetae Куратор тега JavaScript
Тлен
C localStorage можно работать как с обычным объектом.
for(let [key, value] of Object.entries(localStorage)) {
  console.log(key, value)
}
Ответ написан
Комментировать
@Sun_Day
Возьмите свойство localStorage(в данном случае window.localStorage - это одно и то же).
И обойдите его циклом, получив все value.
localstorage
for (let i = 0; i < localStorage.length; i+= 1) { 
const key = localStorage.key(i)
const value = localStorage[key];
console.log(value);
}

Ну и дальше делайте что нужно со списком value'сов и выводите в html.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы