Question

我正在尝试为PHP制作学习待办事项列表。我使用了bootstrap类：collapse和list-group。每个列表标签都有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>

Answer 1

现在您已经建立了存储数据的代码库，您获取数据的问题变得微不足道。您已经迭代了徽章，因此在同一步骤中，您可以根据本地存储轻松设置值。如果密钥在本地存储中不存在，.getItem将返回null。这允许您使用逻辑OR运算符设置默认值。您的“获取”代码如下：

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

StackOverflow对代码段编辑器进行沙箱处理，因此以下代码段中的本地存储代码已被注释掉。但是，您可以在行动in this fiddle中看到它。

您可以采取其他方法来存储这些值。这只是一种无处不在的方法，但希望这可以帮助您制作完整的应用程序。

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>

如何在本地存储中存储多个相同类型的数据？

1 个答案: