我似乎无法清除我的本地存储

Question

我似乎无法让我的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点击事件中看到的所有内容都是我尝试过的。没有用，我知道这是因为我的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）中，您正在使用键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");