Save plugin state using local storage

Photoshop UXP Plugin API
1

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?

2

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
3

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
4

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

3 Likes
5

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
6

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

1 Like
7

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

8

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

1 Like
11

This is really great
is there a way to store in a json file
the values of the textfield?

12

This repository demonstrates saving user input into a json file. It uses a folder picker rather than a textfield but the principal is still the same

13

Timothy
you are always kind
thanks for your support.