localStorage 始终在一个键中设置值

Question

我创建了一个将 data- 属性设置到 localStorage 的函数。但它始终只将值设置在同一个键中，导致只有一个键。如何解决这个问题。

Answer 1

下面给出了一个简单的 localStorage 示例。

window.addEventListener('load', function() {
  console.log('All assets are loaded');
  localStorage.clear();
})

function fun(id) {
  localStorage.setItem(id.getAttribute('data-date'), "tasks from " + id.getAttribute('data-date'));
  var x = localStorage.getItem(id.getAttribute('data-date'));
  document.getElementById("pop").innerHTML = x;
  console.log(id.getAttribute('data-date'));
  for (var i = 0; i < localStorage.length; i++) {
    console.log(i + " HAS " + localStorage.getItem(localStorage.key(i)));
  }
}

* {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.644);
}

div {
  margin: 10px;
  display: block;
  font-size: 20px;
}

.a {
  padding: 4vw;
  display: inline-block;
}

<div class="a" onclick="fun(this)" data-date="1">1st day</div>
<div class="a" onclick="fun(this)" data-date="2">2nd day</div>
<div class="a" onclick="fun(this)" data-date="3">3rd day</div>
<div>inside the popup: </div>
<div id='pop'>tasks comes here </div>

如果每个值都进入同一个键，您可能还没有从函数中的元素读取唯一的 data- 属性。

localStorage 始终在一个键中设置值

localStorage sets value in one key all the time

local-storage