Question

This is my popup.js in the chrome extension:

 function getlink(){

    console.log(document.getElementById("linkify").value);
    if(document.getElementById("linkify").value == "on")
    {
            localStorage.setItem("linkify",false);

            document.getElementById("linkify").innerHTML = "Get links - off";
            document.getElementById("linkify").value = "off";
            console.log(document.getElementById("linkify").value);
            chrome.extension.sendRequest({ msg: "linkify"});

    }
    else if(document.getElementById("linkify").value == "off")
    {
        localStorage.setItem("linkify",true);
        console.log("Hello!");
        document.getElementById("linkify").innerHTML = "Get links - on";
        document.getElementById("linkify").value = "on";
        chrome.extension.sendRequest({ msg: "linkify"});

    }
    }

    $(document).ready(function (){


    if(localStorage.getItem("linkify"))
    {
        document.getElementById("linkify").innerHTML = "Get links - on";
        document.getElementById("linkify").value = "on";
    }
    $("#linkify").click(function() {
      getlink();
    });
    });

Basically, the functionality that I want is this: a button in the extension which can be toggled on or off. When toggled, its text changes and so does the value stored in localStorage.

Though, the toggle works fine, this is the bug that happens:

If I switch off the button, that is turn it into get links off and exit the popup. And then open the popup again, the button state is back “on”. It is not maintaining its state.

Answer 1

You problem is how you are using local storage. Local storage stores everything as a string.

So basically:

localStorage.setItem("foo", false)
localStorage.getItem("foo") // returns "false"

if(localStorage.getItem("foo")) {
  console.log("bar")
} else {
  console.log("bing")
}
// Logs bar