Working on a google chrome extension, I am facing challenges in utilizing local storage to retain the value of the last clicked button. My goal is to ensure that the last clicked button remains visible even after closing the popup. Despite my efforts with local storage, the button fails to persist once the popup is closed. Checking the application's local storage while inspecting reveals that the last clicked values are not being saved.
This https://i.sstatic.net/rjgB8.png and this https://i.sstatic.net/KFJG6.png show some screenshots of the issue at hand. It seems like I might be approaching this problem incorrectly. Would anyone happen to know what might be causing this discrepancy?
//Button identifiers for starting and stopping logging
const btnStart = document.getElementById("click-start");
const btnStop = document.getElementById("click-stop");
var lastClicked = document.getElementById("btnStartID");
//Logic for controlling start/stop buttons
document.addEventListener("DOMContentLoaded", function () {
//Retrieve lastClicked to make decisions
chrome.storage.local.get(['lastClicked'], function(result) {
if (result == document.getElementById("btnStartID")) {
//Works as expected
btnStart.style.display= "none";
btnStop.style.display= "block";
console.log("last clicked is start button");
Logger(true);
} else if (result == document.getElementById("btnStopID")) {
//Not functioning correctly
btnStart.style.display= "block";
btnStop.style.display= "none";
Logger(false);
console.log("last clicked is stop button");
} else {
//Verify if the IDs of elements are being grabbed properly
console.log("else statement");
Logger(true);
}
//Adding functionality to Start button
btnStart.addEventListener("click", function() {
lastClicked = document.getElementById("btnStartID");
Logger(true);
chrome.storage.local.set({'lastClicked': lastClicked}, function() {
console.log('logging started successful');
});
});
//Adding functionality to Stop button
btnStop.addEventListener("click", function() {
lastClicked = document.getElementById("btnStopID");
Logger(false);
chrome.storage.local.set({'lastClicked': lastClicked}, function() {
console.log('logging stopped successful');
});
});
});
});
chrome.storage.local.get(['key'], function(result) {
console.log('value currently is ' + result.key);
});
//Process to enable Start/Stop logging buttons--work in progress
function Logger(isLogging) {
let logger =''
if (isLogging){
btnStart.style.display= "none";
btnStop.style.display= "block";
logger = 'logging'
addRow();
} else {
btnStart.style.display= "block";
btnStop.style.display= "none";
logger = 'not logging'
}
//Utilizing storage API to save data for the last pressed button--work in progress
chrome.storage.local.set({key: logger}, function() {
console.log('value is set to ' + logger);
});
}