how to save toggle button state to localstorage function in html5 canvas?

[inxelo]

this.tomboltanam.addEventListener("click", fl_MouseClickHandler_9.bind(this));

function fl_MouseClickHandler_9(){
if(localStorage.getItem(this.currentFrame) == 1){
	localStorage.setItem(this.tomboltanam.gotoAndPlay(2));
}
	else{
	localStorage.setItem(this.tomboltanam.gotoAndPlay(1));
		}
}

 i have basic knowledge of coding with adobe animate . tomboltanam is the button name , the button is a movieclip with 2 frames in it to simulate a toggle button

if the user clicked which is frame 1 at that current time then play frame 2 which is the pressed button state

else then back to frame 1.  And i want to save the button state so that when i refreshed the page the button state will stay the same as last time , i figure out the code through browsing web but it is still not saving as i hope .whats wrong with the code?

[JoãoCésar · Accepted solution]

Hi.

There are some problems in your code.

if(localStorage.getItem(this.currentFrame) == 1){

Here you're checking for the parent's current frame and not for the button's current frame.

localStorage.setItem(this.tomboltanam.gotoAndPlay(2));

The gotoAndPlay method doesn't return anything. So this line won't work. Also, it would be better to use gotoAndStop because your button only have two frames.

My suggestion would be:

var key = "buttonState";

this.tomboltanam.gotoAndStop(localStorage.getItem(key) || 0);

this.tomboltanam.on("click", function(e)
{
	var target = e.currentTarget;
	
	if (target.currentFrame === 0)
		target.gotoAndStop(1);
	else
		target.gotoAndStop(0);
	
	localStorage.setItem(key, target.currentFrame);
}, this);

I hope this helps.

Regards,

JC

[inxelo]

Thank You so much it's working perfectly now , I have learned alot from you . but i have 1 more question if I have multiple buttons for example tomboltanam,tomboltanam2,tomboltanam3,tomboltanam4,tomboltanam5 etc...

how do i save all the state of button

do i need to copy the code to every single one of the buttons?

from this code ?

var key = "buttonState";

this.tomboltanam.gotoAndStop(localStorage.getItem(key) || 0);

this.tomboltanam.on("click", function(e)
{
	var target = e.currentTarget;
	
	if (target.currentFrame === 0)
		target.gotoAndStop(1);
	else
		target.gotoAndStop(0);
	
	localStorage.setItem(key, target.currentFrame);
}, this);

[JoãoCésar]

Great.

The ideal would be to use Object Oriented Programming (OOP).

But I'm going to suggest an easier and straightforward approach to help you understand better some concepts.

EDITED 02/03/2022:

var key = "buttonStates";
var data = localStorage.getItem(key) || "{}";
var states = JSON.parse(data);
var buttons = [ this.tomboltanam0, this.tomboltanam1, this.tomboltanam2, this.tomboltanam3, this.tomboltanam4 ];

function toggle(e)
{
	var target = e.currentTarget;
	
	if (target.currentFrame === 0)
		target.gotoAndStop(1);
	else
		target.gotoAndStop(0);
	
	states[target.name] = target.currentFrame;
	localStorage.setItem(key, JSON.stringify(states));
}

buttons.forEach(function(button)
{
	button.gotoAndStop(states[button.name] || 0);
	button.on("click", toggle);
});

Old and incorrect version - the names object must be replaced by the states object:

var names = {};
var key = "buttonStates";
var data = localStorage.getItem(key) || "{}";
var states = JSON.parse(data);
var buttons = [ this.tomboltanam0, this.tomboltanam1, this.tomboltanam2, this.tomboltanam3, this.tomboltanam4 ];

function toggle(e)
{
	var target = e.currentTarget;
	
	if (target.currentFrame === 0)
		target.gotoAndStop(1);
	else
		target.gotoAndStop(0);
	
	names[target.name] = target.currentFrame;
	localStorage.setItem(key, JSON.stringify(names));
}

buttons.forEach(function(button)
{
	button.gotoAndStop(states[button.name] || 0);
	button.on("click", toggle);
});

Please let us know if you have any further questions.

Regards,

JC

[inxelo]

There is a problem when I test it when i refresh on the first time it works,  the button I pressed still mantaining its state , but when I refresh on the second or third time it starts to turn off in one of the button . I already try with only 4 button but it still do that sometimes.. 

[JoãoCésar]

Do all buttons have unique names?

[inxelo]

yes like this there is ftanam1 , ftanam2 etc , but only on single intance symbol 8 down

because i copy paste from ftanam1 movieclip and then I duplicate it to many buttons but then I change every single buttons instance name that i duplicate

[JoãoCésar]

Hi.

Oh, I'm really sorry... There's an error in my code. It should be like this:

var key = "buttonStates";
var data = localStorage.getItem(key) || "{}";
var states = JSON.parse(data);

var buttons =
[
	this.tomboltanam0,
	this.tomboltanam1,
	this.tomboltanam2,
	this.tomboltanam3,
	this.tomboltanam4,
	this.tomboltanam5,
	this.tomboltanam6,
	this.tomboltanam7,
	this.tomboltanam8,
	this.tomboltanam9,
	this.tomboltanam10,
	this.tomboltanam11,
	this.tomboltanam12,
	this.tomboltanam13,
	this.tomboltanam14,
	this.tomboltanam15
];

function toggle(e)
{
	var target = e.currentTarget;
	
	if (target.currentFrame === 0)
		target.gotoAndStop(1);
	else
		target.gotoAndStop(0);
	
	states[target.name] = target.currentFrame;
	localStorage.setItem(key, JSON.stringify(states));
}

buttons.forEach(function(button)
{
	button.gotoAndStop(states[button.name] || 0);
	button.on("click", toggle);
});

I hope it works now.

Regards,

JC