Save plugin state using local storage

Hello Guys, like the title says, I can’t get my head around this, I have about 30 or more checkboxes in a plugin, I am trying to save the state of all checkboxes when a user chooses.

Right now I am using this code, but it does not work. When I reload or close photoshop, the previous state gets lost.

const convertsRGBcheckbox = document.getElementById("convertsRGB");
localStorage.setItem("convertsRGB", convertsRGBcheckbox.value);
convertsRGBcheckbox.value = localStorage.getItem("convertsRGB") || convertsRGBcheckbox.value;

Also, other question, what would be the best practice way to do this for over 30 checkboxes?

You could save the settings to a JSON file which you read on plugin load.
Check this repository for a basic example. Look at /lib/settings.js in particular.
The demo is saving different data (persistent tokens), but the principal is the same.

1 Like

If you, like me, are learning javascript to be able to develop UXP plugins, I advise you to do a search on the internet, there is a lot of free content.
Here a working example based on your question!
html:

<sp-checkbox size="s"  id="ck1" class="checks">Opção 1</sp-checkbox>
<sp-checkbox size="s"  id="ck2" class="checks">Opção 2</sp-checkbox>
<sp-checkbox size="s"  id="ck3" class="checks">Opção 3</sp-checkbox>
<sp-checkbox size="s"  id="ck4" class="checks">Opção 4</sp-checkbox>
<hr>
<sp-action-button size="s"  id="salvar">Save value</sp-action-button>

js:

restoreCheckboxes ();
document.querySelector("#salvar").addEventListener("click", async evt => {
	savefunction() 
})

function savefunction(){
	var checkboxes = document.querySelectorAll('.checks');
	var checked = {};
	for (var i = 0; i < checkboxes.length; i ++) {
		if (checkboxes[i].checked) {
		checked[checkboxes[i].id] = checkboxes[i].value;
		}
	}
	localStorage.setItem('checked_boxes', JSON.stringify(checked)); 
	console.log(checked);
}

function restoreCheckboxes () {
	var checkbox = document.querySelectorAll('.checks');
	var checkboxStates = localStorage.getItem('checked_boxes');
	if (checkboxStates) {
		checkboxStates = JSON.parse(checkboxStates); // <-- parse string to object
		for (i = 0; i < checkbox.length; i ++) {
			if (checkboxStates.hasOwnProperty(checkbox[i].id)) {
			checkbox[i].checked = true;
			}
		}
	}
}
1 Like

Hi, localStorage should work fine, just make sure to use the checked property in a <sp-checkbox> (not the value).

Also, be aware that if you store the boolean true in localStorage, you’re gonna get the "true" string back—so you’ll need to take that into account and do something like:

if (localStorage.getItem("RGB") === "true") {
   convertsRGBcheckbox.checked = true;
} else {
  convertsRGBcheckbox.checked = false;
}

Or with a busier one liner:

convertsRGBcheckbox.checked = localStorage.getItem("RGB") === "true" ? true : false;

The above is going to assign false also when "RGB" isn’t found in localStorage.
HTH,
–Davide

2 Likes

Let me nitpick a bit here :sweat_smile: localStorage.getItem("RGB") === "true" already evalueates to bool, so it would be enough just:

convertsRGBcheckbox.checked = localStorage.getItem("RGB") === "true";

But I think <sp-checkbox> doesn’t deal with false for checked, so it should be:

convertsRGBcheckbox.checked = localStorage.getItem("RGB") === "true" ? true : null;
2 Likes

Thanks for nitpicking :grin::+1:t2:

1 Like

Thank you guys for all explanations and help. Now my plugin works properly :slight_smile:

Yes, still learning JS from some courses, but I am also learning by doing real world projects, appreciate the help.

1 Like