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

Community Beginner ,
Feb 01, 2022 Feb 01, 2022

Copy link to clipboard

Copied

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?

TOPICS
ActionScript , Code , How to

Views

185

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Feb 02, 2022 Feb 02, 2022
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.ge...

Likes

Translate

Translate
Adobe Community Professional ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

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);

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

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.. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

Do all buttons have unique names?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

inxelo_0-1643824015442.png

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 03, 2022 Feb 03, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines