window.localStorage以对象为键时ID递增至10后无法增长的问题

你遇到的ID卡在10无法递增的问题，核心原因是localStorage的key是按字符串字典序排序的，而不是你插入的数值顺序。

举个例子：当你创建id=10的记录时，对应的key是字符串"{\"id\":10}"。在字典序里，这个字符串会排在"{\"id\":2}"、"{\"id\":3}"..."{\"id\":9}"的前面。你的原代码循环遍历所有key时，最后一次赋值给lastId的其实是id=9（因为最后一个遍历到的key是"{\"id\":9}"），所以每次执行++lastId都会得到10，自然就卡在这个数值上了。

这里提供两种可行的修复方案，你可以根据实际需求选择：

方案一：收集所有ID并取最大值（兼容现有数据） #

这个方案会遍历所有已存储的key，收集所有id后找出最大值，确保每次都能正确递增：

function addRecord() {
 let myDatabase = window.localStorage;
 let currentId = document.getElementById('currentId');
 let allIds = [];
 let fileId = { id: '', }
 let addedValues = { 'fileNumber': 12, 'volumeNumber': 1, 'directorate': 'wana', }
 
 // 遍历所有key，收集所有已存在的id
 for (let i = 0; i < myDatabase.length; i++) {
   const key = myDatabase.key(i);
   const parsedKey = JSON.parse(key);
   allIds.push(parsedKey.id);
 }
 
 // 计算当前最大id，如果没有数据则默认0
 let maxId = allIds.length > 0 ? Math.max(...allIds) : 0;
 
 try {
   fileId.id = ++maxId;
   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}`);
 }
}

方案二：单独存储最大ID（更高效） #

如果你的数据量较大，遍历所有key会有性能损耗，建议直接在localStorage里单独存储一个记录最大id的键，避免每次遍历：

function addRecord() {
 let myDatabase = window.localStorage;
 let currentId = document.getElementById('currentId');
 let fileId = { id: '', }
 let addedValues = { 'fileNumber': 12, 'volumeNumber': 1, 'directorate': 'wana', }
 
 // 获取存储的最大id，没有数据则默认0
 let lastId = parseInt(myDatabase.getItem('lastId')) || 0;
 
 try {
   fileId.id = ++lastId;
   currentId.innerHTML = fileId.id;
   // 保存新记录
   myDatabase.setItem(JSON.stringify(fileId), JSON.stringify(addedValues));
   // 更新存储的最大id
   myDatabase.setItem('lastId', lastId.toString());
 } catch (err) {
   alert(`There is some problem, the record cannot be saved! ${err}`);
 }
}

这个方案只需要两次localStorage操作（读和写lastId），性能比遍历所有key好很多，推荐使用。

内容的提问来源于stack exchange，提问作者amanuel kumera