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?
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));
}