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

【问题标题】：How to store multiple data of the same kind in local storage?如何在本地存储中存储多个相同类型的数据？
【发布时间】：2018-10-12 17:46:42
【问题描述】：

我正在尝试为 PHP 制作一个学习待办事项列表。我使用了引导类：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>

【问题讨论】：

做起来并不难。您是否尝试过自己编写代码？这是the documentation。您的策略将是设置以下逻辑：1）在页面加载时为本地存储中设置的任何值分配本地存储中的徽章值，以及 2）在单击事件中写入本地存储以更新点击徽章。最难做的事情可能是决定如何在存储徽章时唯一标识它们。
我已经知道如何从本地存储中存储和检索数据。我的问题是我不知道如何唯一标识徽章以便以后存储和检索其值并在 javascript 代码中实现它。
如果你现在运行你的 sn-p，你的两行是什么？是Iteration 和Selection 的标签吧？除非您将这些行与数字 ID 相关联，否则这就是您的唯一标识符。下一个问题是如何将基于文本的标识符从标记中获取到您的 javascript 中。您对如何实现这一点有任何想法吗？如果是我，我会先将这些字符串作为属性添加到标记中的某处。你认为哪里最好？
我最初尝试使用章节标题和当前列表数据作为要存储的数据的键，我得到了使用一些正则表达式单击的徽章的值。谢谢约瑟夫，我想我有一个想法。我将使用带有章节名称的数组（即 php），并且行数字 ID 将用作数组的索引。但我仍然想不出如何识别哪些徽章及其值并将它们存储在键值对中并稍后检索它们
优秀。如何识别徽章。通过访问e.target，您已经知道点击了哪一个。从此，您已经可以使用.textContent 访问该值，这很有效。您可以使用e.target.getAttribute('your-attribute-name')。这样，您可以使用<span class="badge badge-info float-right" your-attribute-name="whatever"> 将该值的密钥放在徽章本身上。您还可以使用e.target.parentNode.getAttribute('whatever') 访问父属性。这个选择取决于你。你能用类似的逻辑更新你的问题吗？

标签： javascript html local-storage badge

【解决方案1】：

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

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

StackOverflow 对 sn-p 编辑器进行沙箱处理，所以后面 sn-p 中的本地存储代码被注释掉了。但是，您可以在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>

【讨论】：

感谢您的大力帮助。我非常了解您的代码。我目前正在制作具有新功能的另一个版本的代码，例如从 javascript 添加新的折叠元素和行内容。我会及时通知您。
@TechXpert 酷！很高兴我能帮助你。 :)
嘿 Joseph，我刚刚完成了项目的最终版本，我希望您能对其进行评论：jsfiddle.net/yuvraj034c/pznjpb2c 但是，本地存储和徽章在 Js fiddle 上并没有增加。它在我的文本编辑器中运行良好：您需要记住一些注意事项：首先，添加子章节时，写章节的 id 后跟 * 后跟子章节名称。例如，如果您想在 php 中添加循环，请在子章节的输入框中输入 php*loops。删除子章节：在删除输入框中写php.loops（不是*）。
如果要删除章节，请在删除框中输入章节，然后按删除键。然后打开控制台并复制提供的代码并将此处的值更改为要删除的章节的名称（本例中为php）并重新加载页面。
再次感谢您帮助我了解本地存储的逻辑和代码。我永远不会那样想。这是我为个人使用而构建的第二个或第三个工作程序。我还在学习网络开发。我知道 html/css/bootstrap/javascript 到 ajax（目前正在学习）、基本的 php 等等。你能给我一些建议，告诉我什么以及如何有效和快速地学习。