Question

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

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

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

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

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

Answer 1

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

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

所以这是一个知道当前起源还有什么的问题。如果您控制当前原点上的所有内容并且不介意全部擦除，clear()是最佳选择，并且是为此目的而设计的。如果代码的其他部分使用localstorage或同一来源托管的其他项目，那么您将希望更具选择性并使用removeItem()。

Answer 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()

Answer 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>

localStorage - clear（）或removeItem（）？

3 个答案: