将window.localStorage键设置为对象时遇到问题

Question

我想将object设置为window.localStorage的键，并通过将id的值增加1来设置键。它可以一直工作到10，然后再增加到11。这确实让我感到困惑，也没有任何问题的提示。

<button id="addValue" onclick="addRecord()">Add</button>
<span id="currentId"></span>

<script>
  function addRecord() {
    let myDatabase = window.localStorage;
    let currentId = document.getElementById('currentId');
    let lastId = '';
    let fileId = {
      id: '',
    }
    let addedValues = {
      'fileNumber': 12,
      'volumeNumber': 1,
      'directorate': 'wana',
    }
    for (let i = 0; i < myDatabase.length; i++) {
      lastId = JSON.parse(myDatabase.key(i)).id;
    }
    try {
      fileId.id = ++lastId;
      currentId.innerHTML = fileId.id;
      myDatabase.setItem(JSON.stringify(fileId), JSON.stringify(addedValues));
    } catch (err) {
      alert(`There is some problem, the record cannot be saved! ${err}`);
    }
  }
</script>

输出应为1、2、3、4、5、6、7、8、9、10、11、12 ...，但堆栈为10

Answer 1

知道了。

问题出在存储空间上。

从storage获取记录后，首先必须对键进行排序。

当您存储新的10th记录时，它会被排序并位于first index的存储位置。

在这里看到。

因此您将获得存储的最后一项，而最后一项始终为9，因为当10th添加到0索引中时。

Answer 2

我认为您无法以这种方式获取所有本地存储，您需要执行以下操作：

for (var key in localStorage){
   console.log(key)
}

或

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}

也许可以在排序后保存最后一个，然后添加更多键。