无法在localStorage中保存2个以上的项目

问题分析

无法在localStorage中保存2个以上的项目，可能是由于以下几个原因：

存储空间限制：localStorage的存储空间有限，通常为5MB左右。如果存储的数据量超过了这个限制，后续的存储操作会失败。
存储键冲突：如果多个项目使用了相同的键（key），后面的存储操作会覆盖前面的数据。
浏览器限制：某些浏览器可能对localStorage的使用有额外的限制或bug。
代码逻辑问题：代码中可能存在逻辑错误，导致无法正确存储数据。

解决方法

1. 检查存储空间

首先，检查localStorage的使用情况，确保没有超过存储空间限制。可以通过以下代码查看当前localStorage的使用情况：

function getLocalStorageUsage() {
    let total = 0;
    for (let key in window.localStorage) {
        if (window.localStorage.hasOwnProperty(key)) {
            total += window.localStorage[key].length * 2 / 1024; // 每个字符2字节
        }
    }
    return total.toFixed(2) + ' KB';
}

console.log('Current localStorage usage: ' + getLocalStorageUsage());

如果存储空间接近上限，可以考虑清理一些不必要的数据。

2. 确保键的唯一性

确保每个存储的项目都有唯一的键。可以使用时间戳或随机数来生成唯一的键：

function saveToLocalStorage(keyPrefix, data) {
    const uniqueKey = keyPrefix + Date.now();
    localStorage.setItem(uniqueKey, JSON.stringify(data));
}

function getFromLocalStorage(keyPrefix) {
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith(keyPrefix)) {
            return JSON.parse(localStorage.getItem(key));
        }
    }
    return null;
}

3. 处理浏览器限制

某些浏览器可能对localStorage的使用有额外的限制。可以尝试在不同的浏览器中测试，或者使用try-catch块来捕获和处理异常：

function saveToLocalStorage(key, data) {
    try {
        localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
        console.error('Failed to save to localStorage:', e);
        // 处理异常，例如提示用户清理存储空间
    }
}

4. 检查代码逻辑

确保代码逻辑正确，特别是在循环或条件判断中存储数据时。可以添加日志来调试：

function saveMultipleItems(items) {
    for (let i = 0; i < items.length; i++) {
        const key = 'item_' + i;
        console.log(`Saving item with key: ${key}`);
        try {
            localStorage.setItem(key, JSON.stringify(items[i]));
        } catch (e) {
            console.error(`Failed to save item with key: ${key}`, e);
        }
    }
}