Как хранить несколько данных одного вида в локальном хранилище? - PullRequest
Новая
       11

Как хранить несколько данных одного вида в локальном хранилище?

0 голосов
/ 02 мая 2018

Я пытался составить Список дел для изучения для PHP. Я использовал классы начальной загрузки: свернуть и список-группа. Каждый тег списка имеет 2 значка, которые служат для счетчиков.

Значок 1 = нет времени, когда я изучал или пересматривал главу.

Знак 2 = нет времени, я фактически использовал концепцию из главы.

Когда я нажимаю на значки, их число должно увеличиваться на единицу. Я добавлю опции для добавления новых глав и подразделов позже.

На данный момент я хочу сохранить значения значков в моем локальном хранилище для дальнейшего использования.

Когда я обновляю страницу, все значки должны быть обновлены до их текущих значений.

Я уже знаю, как получать и извлекать данные из локального хранилища, но я не знаю, как реализовать это в текущей ситуации. 

var badges= document.querySelectorAll('.badge');
badges.forEach(function (e) {
	e.addEventListener('click', incrementBadge);
});

function incrementBadge(e){
  let num =Number(e.target.textContent)+1;
  e.target.textContent=num;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container mt-5">
 <div class="row">
	<div class="col-lg-6">
	<button class="btn btn-block btn-info" data-toggle="collapse" data-target="#php">Php</button>
	<div class="collapse" id="php">
		<ul class="list-group  mt-0">
			<li class="list-group-item">Iteration
				<span data-type="revise"class="badge badge-info float-right">4</span>
				<span data-type="practice" class="badge badge-success float-right mr-3">2</span>
			</li>
			<li class="list-group-item">Selection
				<span data-type="revise" class="badge badge-info float-right">0</span>
				<span data-type="practice" class="badge badge-success float-right mr-3">2</span>
			</li> 
		</ul>						
		</div>
	</div>
 </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

1 Ответ

0 голосов
/ 02 мая 2018

Теперь, когда вы создали кодовую базу для хранения данных, ваша проблема с получением данных становится тривиальной. Вы уже перебираете значки, поэтому на этом же шаге вы можете легко установить значение на основе локального хранилища. Если ключ не существует в локальном хранилище, .getItem вернет null. Это позволяет вам установить значение по умолчанию, используя логический оператор ИЛИ. Ваш «получающий» код может быть следующим: 

let key = e.parentNode.getAttribute('data-id') + '.' + e.getAttribute('data-type');
e.textContent = localStorage.getItem(key) || 0;

StackOverflow помещает в песочницу редактор фрагмента, поэтому код локального хранилища в следующем фрагменте закомментирован. Однако вы можете увидеть его в действии в этой скрипке .

Существуют и другие подходы, чтобы сохранить эти значения. Это всего лишь рудиментарный подход, но, надеюсь, это поможет вам сделать полноценное приложение. 

var badges= document.querySelectorAll('.badge');
badges.forEach(function (e) {
  let key = e.parentNode.getAttribute('data-id') + '.' + e.getAttribute('data-type');
	//e.textContent = localStorage.getItem(key) || 0;
	e.addEventListener('click', incrementBadge);
});

function incrementBadge(e){
  let num =Number(e.target.textContent)+1;
  let key = e.target.parentNode.getAttribute('data-id') + '.' + e.target.getAttribute('data-type');
  //localStorage.setItem(key, num);
  e.target.textContent=num;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container mt-5">
 <div class="row">
	<div class="col-lg-6">
	<button class="btn btn-block btn-info" data-toggle="collapse" data-target="#php">Php</button>
	<div class="collapse" id="php">
		<ul class="list-group  mt-0">
			<li class="list-group-item" data-id="iteration">Iteration
				<span data-type="revise"class="badge badge-info float-right">4</span>
				<span data-type="practice" class="badge badge-success float-right mr-3">2</span>
			</li>
			<li class="list-group-item" data-id="selection">Selection
				<span data-type="revise" class="badge badge-info float-right">0</span>
				<span data-type="practice" class="badge badge-success float-right mr-3">2</span>
			</li> 
		</ul>						
		</div>
	</div>
 </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
...