JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<label for="1">Hi 1</label>
<input type="checkbox" id="1"/>
</div>
<div>
<label for="2">Hi 2</label>
<input type="checkbox" id="2"/>
</div>
<div id="result"></div>
JavaScript
function doStuff() {
var checkbox =document.getElementById('2');
var myStorageData = localStorage.getItem('myData');
if(myStorageData) {
log("Storage data: " + myStorageData);
myStorageData = JSON.parse(myStorageData);
}
else {
log("Creating new storage data");
myStorageData = {};
}
log("Setting storage data for id: " + checkbox.id + " with display: " + checkbox.style.display);
myStorageData[checkbox.id] = checkbox.style.display;
log("Setting local storage with: " + JSON.stringify(myStorageData));
localStorage.setItem('myData',JSON.stringify(myStorageData));
}
function doOtherStuff() {
var myStorageDataString = localStorage.getItem('myData');
log("Found data for: " + myStorageDataString);
}
function log(message)
{
document.getElementById('result').innerHTML += message + "</br>";
}
doStuff();
doOtherStuff();