javascript - 我似乎无法清除我的 localStorage

Question

我似乎无法清除本地存储

我有两个独立的 JS 文件，一个名为 StorageBin，另一个名为 JAS2。

这是我在 StorageBin 中的代码

function MyStorage() { };
MyStorage.Keys = {
    MyNewObject:""
};

MyStorage.Keys = function (value) {
    localStorage.setItem(this.Keys.MyNewObject, JSON.stringify(value))
    return value;
};

在 JAS2 文件中是

$(document).ready(function () {

    var myObject = {
        Name: "John",
        LastName: "Doe"
    }

    MyStorage.Keys.MyNewObject = myObject;

    var hereItIs = MyStorage.Keys.MyNewObject;

    console.log(hereItIs.LastName + ", " + hereItIs.Name);


    $('#btn').click(function () {

        //localStorage.removeItem("MyNewObject");
        //localStorage.removeItem("MyStorage.Keys.MyNewObject");
        //window.localStorage.clear();
        //window.localStorage.removeItem("MyNewObject");

    });

    $('#btn2').click(function () {
        var hereItIs = MyStorage.Keys.MyNewObject;

        console.log(hereItIs.LastName + ", " + hereItIs.Name);
    });


});

您在 btn 点击事件中看到的所有注释都是我尝试过的。没有一个起作用，我知道这一点是因为我的 btn2 点击事件。

我哪里出错了？

Answer 1

简短回答

您正在设置一个以对象作为键的条目，而不是字符串。生成的键名称将为 "[object Object]"，因此您无法使用 "MyNewObject" 或 "MyStorage.Keys.MyNewObject 访问或删除它“。

<小时/>

我注意到的第一个问题:MyStorage.Keys 不能同时是一个对象和一个函数。所以这段代码没有多大意义:

MyStorage.Keys = { // This object will be lost shortly.
    MyNewObject: ""
};

MyStorage.Keys = function(value){
    localStorage.setItem(this.Keys.MyNewObject, JSON.stringify(value))
    return value;
};

第一个分配可以删除。

当然，此行之后将存在一个新的 MyNewObject 属性:

MyStorage.Keys.MyNewObject = myObject;

在保存函数 (MyStorage.Keys) 中，您使用 this.Keys.MyNewObject 键设置 LocalStorage 条目。它指的是myObject，它是一个对象。这也没有意义，因为 setItem 期望一个 string 作为第一个参数，而不是一个对象。因此，参数将被转换为字符串并生成 [object Object]。

<小时/>

但是，您似乎想要使用 "MyNewObject" 或 "MyStorage.Keys.MyNewObject" 访问您的 LocalStorage 条目。因此，只需使用以下行之一进行设置即可:

localStorage.setItem("MyNewObject", JSON.stringify(value));

localStorage.setItem("MyStorage.Keys.MyNewObject", JSON.stringify(value));

然后，您的第一次尝试中的一次或最后一次将会成功。

如果您希望 key 为{Name:"John",LastName:"Doe"}，请使用

localStorage.setItem(JSON.stringify(this.Keys.MyNewObject), JSON.stringify(value));

如果您希望 key 为 Doe, John，请使用

localStorage.setItem(hereItIs.LastName + ", " + hereItIs.Name, JSON.stringify(value));

无论如何，如果您想删除这些条目，您需要以相同的方式生成其 key 。

localStorage.clear(); 还应该清除本地存储中的所有内容。我无法重现它不工作。

<小时/>

调试

您可以使用browser console (dev tools)来调试本地存储。 (点击F12)并转到Storage选项卡(您可能需要在开发工具设置中启用它)。在那里您将看到保存了哪些键和值。

<小时/>

更多示例

Storage on MDN

设置条目

localStorage.setItem("MyNewObject", JSON.stringify(value));

获取该条目

localStorage.getItem("MyNewObject");

删除该条目

localStorage.removeItem("MyNewObject");