localStorage - clear() 还是 removeItem()？答案

【问题标题】：localStorage - clear() or removeItem()?localStorage - clear() 还是 removeItem()？
【发布时间】：2021-08-11 18:20:34
【问题描述】：

我应该使用clear() 来删除localStorage 中的所有内容，还是应该手动removeItem() 我在该特定站点上设置的那些（这很容易跟踪）？

我问是因为如果用户设置了其他值，我不想最终清除用户的localStorage。我在 localhost 中对此进行了测试，并注意到通过使用 clear()，我之前在其他项目中设置的所有内容都被清除了。

编辑：我应该提到我知道 localStorage 是域锁定的。我正在运行一个遵循这种结构的网站：

public-html
(localStorage)
--project1
----files
--project2
----files
--project3
----files

每个文件都使用自己独立的 localStorage 变量。如果我在project2中localstorage.clear()，project1和project3的设置也会丢失。

【问题讨论】：

不确定这里的问题是什么。你是说你不能使用clear 所以......

标签： javascript html local-storage

【解决方案1】：

localstorage 被键入到一个源。因此，如果您的所有项目都在 localhost 上运行，那么当您使用 clear() 时，您将擦除所有值，唯一安全的方法是单独删除。

在生产环境中，每个项目都应该有自己的域，clear 应该是安全的。

所以这是一个知道当前来源上还有什么的问题。如果您控制当前来源上的所有内容并且不介意将其全部清除，clear() 是最佳选择，并且专为此目的而设计。如果您的代码的其他部分使用本地存储或托管在同一源上的其他项目，那么您将需要更有选择性并使用removeItem()。

【讨论】：

不幸的是，我的每个项目都没有一个单独的域——我根本负担不起。我想将所有内容保存在我自己的个人“投资组合”式网站下，子文件夹包含我每个单独的不同项目。不过谢谢，看起来removeItem() 是要走的路！
@Jaxo 如果每个项目都有不同的子域clear() 仍然可以工作

【解决方案2】：

clear() 清除当前原点 (https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript) 上的所有内容。在 example.com 上使用 clear() 不会影响 example2.com 的 localStorage。它正在清除您计算机上所有项目的数据，因为您拥有的所有测试文件都位于同一来源（http://localhost 或 file:///C:\）。因此，可以使用clear()

【讨论】：

【解决方案3】：

Clear() Method

将清除本地存储中的所有内容
不接受任何争论

removeItem() 方法

只会删除您作为参数引用的那些 localStorage 项目。
要使 removeItem 起作用，您必须传入一个参数。例如：

removeItem("list") 只会删除这个“list”关键项

// 为了更好地理解下面的代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="clear-method">Clear Method</button>
    <button id="removeItem-method">RemoveItem Method</button>


    <script>
        const clearMethod = document.getElementById("clear-method");
        const removeItemMethod = document.getElementById("removeItem-method");

        // declaring arraay for localStorage
        const computer = [
    {
        Brand: "Asus",
        Model: "Unknown"
    }
];

const phone = [
    {
        Brand: "Realme",
        Model: "Unknown"
    }
]

// setting up items on localStorage
localStorage.setItem("computer", JSON.stringify(computer));
localStorage.setItem("phone", JSON.stringify(phone));

        clearMethod.addEventListener("click", ()=>{
        localStorage.clear();
        })

        removeItemMethod.addEventListener("click", ()=>{
            localStorage.removeItem("phone");
        })
    </script>
   
</body>
</html>

【讨论】：