CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storage
Chris
Chris

Reputation: 3129

I can't seem to clear out my localStorage

I can't seem to get my localStorage to clear out

I have two seperate JS files, one is called StorageBin and the other is just called JAS2.

This is my code in the StorageBin

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

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

in the JAS2 file is

$(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);
    });


});

everything you see commented out in the btn click event is everything I have tried. None have worked, I know this because of my btn2 click event.

Where have I went wrong?

Upvotes: 0

Views: 2122

Answers (1)

Sebastian Simon
Sebastian Simon

Reputation: 19545

Short answer

You’re setting an entry with an object as a key, rather than a string. The resulting key name will be "[object Object]", so you can’t access or delete it with "MyNewObject" or "MyStorage.Keys.MyNewObject".

First problem I noticed: MyStorage.Keys can’t be an object and a function simultaneously. So this code doesn’t make much sense:

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

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

The first assignment can be removed.

Of course, a new MyNewObject property will exist after this line:

MyStorage.Keys.MyNewObject = myObject;

In the saving function (MyStorage.Keys), you’re setting a LocalStorage entry with the key this.Keys.MyNewObject. It refers to myObject, which is an object. This also doesn’t make sense, because setItem expects a string as the first argument, not an object. The argument will therefore be cast to a string and result in [object Object].

It appears, however, that you want to access your LocalStorage entry with either "MyNewObject" or "MyStorage.Keys.MyNewObject". So just set it with one of these lines instead:

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

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

Then one of your two first attempts or the last one will work.

If you want the key to be {Name:"John",LastName:"Doe"}, use

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

If you want the key to be Doe, John, use

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

In any case, if you want to remove those entries, you need to generate its key the same way.

localStorage.clear(); should also clear everything from local storage. I can’t reproduce it not working.

Debugging

You can debug the Local Storage by using the browser console (dev tools) (hit F12) and going to the Storage tab (you may need to enable it in the dev tools settings). There you will see which keys and values are saved.

Further examples

Storage on MDN

Setting an entry

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

Getting that entry

localStorage.getItem("MyNewObject");

Deleting that entry

localStorage.removeItem("MyNewObject");

Upvotes: 1

Related Questions