How do I keep the checkbox state for Firefox add-on popup?

I'm trying to make a toggle switch based on a checkbox. The checkbox should only change when the user toggles the switch.

Here's my JavaScript code:

var toggle = false;
document.getElementById("toggle").onclick = function () {
  if (this.checked == true) {
    toggle = true;
    document.getElementById("toggleText").textContent = "ENABLED";
    browser.browserAction.setIcon({ path: "/icons/icon.png" });
  } else {
    document.getElementById("toggleText").textContent = "DISABLED";
    browser.browserAction.setIcon({ path: "/icons/icon-inactive.png" });
  }
};

However, the checkbox state is always set to unchecked when I reopen the popup. Any ideas about how I can achieve making this?

Solution

Save the state to local storage. Here's a simplified example:

manifest.json:

{
    "manifest_version": 2,
    "name": "Save states",
    "version": "1.0.0",
    
    "browser_action": {        
        "default_title": "States",
        "default_popup": "index.html"
    }
}

index.html:

<html>
    <head>
    </head>
    <input type="checkbox" id="checkbox"> checkbox
    <script src="index.js"></script>
</html>

index.js:

const checkboxStorageState = JSON.parse(localStorage.getItem("checkboxStorageState"));
const check = document.getElementById("checkbox");
let currentState = false;

if(checkboxStorageState) {
    currentState = checkboxStorageState;
    check.checked = currentState;
}

check.onclick = function() {
    if(this.checked) {
        currentState = true;
    }
    else {
        currentState = false;
    }
    localStorage.setItem("checkboxStorageState", JSON.stringify(currentState));
}