无法将localStorage中所有数据取出并生成对应独立div如何解决

问题根因 #

你只渲染出1个元素的核心原因是存储到localStorage时使用的key会重复，导致旧数据被覆盖：

• 你用generateRandomInteger(20)生成1-20的随机整数作为storageId，多次生成时极易出现重复值
• localStorage为键值对存储结构，相同key执行setItem时会直接覆盖原有值，所以你哪怕执行了3次存储逻辑，最终localStorage里实际可能只有1个有效键值对

修复方案 #

1. 调整key生成规则，避免重复 #

优先推荐用毫秒级时间戳作为key，几乎不会出现重复，替换原有生成storageId的逻辑即可：

// 直接用时间戳当key
let storageId = Date.now().toString();

如果需要保留随机数生成逻辑，要增加重复校验：

// 生成唯一随机id
function generateUniqueStorageId() {
  let id;
  do {
    id = Math.floor(Math.random() * 100000) + 1;
  } while(localStorage.getItem(id.toString()) !== null);
  return id.toString();
}
let storageId = generateUniqueStorageId();

2. （可选）优化渲染逻辑 #

原有的遍历逻辑本身没有问题，你可以先将所有key转为数组再遍历，避免遍历过程中localStorage长度动态变化导致的异常：

// 先提取所有key再遍历
const storageKeys = Object.keys(localStorage);
for (const key of storageKeys) {
  let newDiv = document.createElement("div");
  newDiv.classList.add("task");
  newDiv.setAttribute("task-id", key);
  newDiv.innerHTML = localStorage.getItem(key);
  form.insertAdjacentElement("afterend", newDiv);
}

3. 快速验证 #

你可以在存储逻辑执行后添加调试代码，确认localStorage的实际存储情况：

console.log('localStorage总条数：', localStorage.length);
console.log('所有存储的key：', Object.keys(localStorage));

如果打印的总条数为1，即可确认是存储时key重复导致的问题。

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