按添加顺序添加本地存储项



我想按添加顺序对localStorage项目进行排序。代码工作正常,我可以将项目添加到 localStorage 数组并以 HTML 代码的形式循环遍历数组。

如果我将第 3 项添加到我的数组中,它将成为列表中的第 2 项。我不明白为什么这些项目有完全随机的顺序?

这是我下面的代码。

<body>
<h2>Local Storage - JavaScript</h2>
<form method="post" action="index.html" id="form">
<fieldset>
<legend>Insert Data</legend>
<input id="enterKey" type="text" placeholder="Enter Key...">
<input id="enterValue" type="text" placeholder="Enter Value...">
<input type="submit" value="Set Reminder">
</fieldset>
</form>
<ul id="output">
</ul>
</body>
<script>
form.addEventListener('submit', function(e) {
const key = enterKey.value;
const value = enterValue.value;
if (key && value) {
localStorage.setItem(key, value);
}
})
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
var li = document.createElement("li");
li.textContent = `${key}: ${value}</li>`;
output.appendChild(li);
}
</script>

顺序是随机的,因为 localStorage 存储为键值对,并且此类对象不保证排序。事实上,有些语言故意随机排序,这样程序员就不会依赖任何特定顺序中的项目。因此,如果要进行排序,则需要将排序键引入数据本身,然后读取所有项目并按键排序。

像这样:

form.addEventListener('submit', function (e) {
const key = enterKey.value;
const value = enterValue.value;
if (key && value) {
const count = localStorage.length;
const val = {
value,
order: count,
}
localStorage.setItem(key, val);
}
})
const items = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
items.push({key, value});
}
items.sort((a, b) => a.value.order - b.value.order).forEach(item => {
var li = document.createElement("li");
li.textContent = `${item.key}: ${item.value.value}</li>`;
output.appendChild(li);
});

最新更新