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

我似乎无法清除我的localStorage

我有两个单独的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 click事件中看到的所有注释都是我尝试过的。没有一个有效，我知道这是因为我的btn2 click事件。

我哪里出问题了？

最佳答案

简短答案

您正在设置一个以对象而不是字符串为键的条目。结果键名称为"[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）中，您用键LocalStorage设置this.Keys.MyNewObject条目。它引用myObject，它是一个对象。这也没有意义，因为setItem期望将字符串作为第一个参数，而不是对象。因此，该参数将强制转换为字符串，并导致[object Object]。



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

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

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

然后，您的两个第一次尝试之一或最后一个将起作用。

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

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

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

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

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

localStorage.clear();还应清除本地存储中的所有内容。我无法复制它不起作用。



调试

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



进一步的例子

Storage on MDN

设置条目

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

获得该条目

localStorage.getItem("MyNewObject");

删除该条目

localStorage.removeItem("MyNewObject");