Skip to main content
I
inxelo
Participant
February 2, 2022
Answered

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

  • February 2, 2022
  • 1 reply
  • 2900 views
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?

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
February 2, 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.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

I
inxeloAuthor
Participant
February 2, 2022

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ésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    February 2, 2022

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices