Question

我正在尝试在localStorage中存储多个数据。但是，只存储了一件，我不知道为什么。这是代码

<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<div id="result2"></div>
<script>
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Smith");
    // Retrieve
    document.getElementById("result").innerHTML = 
    localStorage.getItem("lastname");
}
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Jones");
    // Retrieve
    document.getElementById("result2").innerHTML = 
    localStorage.getItem("lastname");
}
</script>
</body>
</html>

在Chrome Developer工具中，在应用程序标签下存储了“琼斯”，但未存储“史密斯”。我检查了类似的问题，但似乎没有一个提供特定的解决方案。

Answer 1

每次致电lastname，您都将覆盖 setItem，因此最后一个（保存"Jones"）将获胜。

如果您要保存多个项目，请执行以下任一操作：

使用其他键（lastname1，lastname2，...）或
以某种格式存储字符串，您可以将其解析为单个项目，例如，存储时JSON.stringify和加载时JSON.parse的数组

旁注：遗憾的是，typeof检查不足以确定您是否可以使用localStorage，因为在某些处于私有浏览模式的浏览器中，typeof会说它在那里当您尝试保存内容时会抛出错误。唯一可以确定的方法是实际尝试保存一些东西：

// Once on page load
const canUseStorage = typeof localStorage !== "undefined" && (() {
    const key = "_test_storage";
    const now = String(Date.now());
    try {
        localStorage.setItem(key, now);
        const flag = localStorage.getItem(key) === now;
        try {
            localStorage.removeItem(key);
        } catch (e) {
        }
        return flag;
    } catch (e) {
        return false;
    }
})();

// Then use `canUseStorage` as necessary to decide if you can use it

（还要注意typeof是一个运算符，而不是一个函数。不需要在其操作数周围加括号。）

localStorage不能存储多个数据

1 个答案: