html5 storage help

[Mindphaser]

Hi all, am VERY new to HTML5 storage feature but want to use it for my boardgame site. In particular I need to know how to have the following sample code keep track of my moveable game tokens:

<CODE>
function saveGameState() {
if (!supportsLocalStorage()) { return false; }
localStorage["halma.game.in.progress"] = gGameInProgress;
for (var i = 0; i < kNumPieces; i++) {
localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
return true;
}
</CODE>

My naming convention for the game pieces is as follows:

<CODE>
<div id="CHIPS">
<!------------START of p1 chips---------->
<span id="p1_chip1" class="chip"><div class="drag"><img src="images/p1_owned_0_upgrades.png" width="65pt" height="20pt"></div></span>
<span id="p1_chip2" class="chip"><div class="drag"><img src="images/p1_owned_0_upgrades.png" width="65pt" height="20pt"></div></span>
<span id="p1_chip3" class="chip"><div class="drag"><img src="images/p1_owned_0_upgrades.png" width="65pt" height="20pt"></div></span>
</div>
</CODE>



Hope this can help you guys to help me

Thanks in advance

[jmrker]

Difficult to test actions without HTML attached
Also, display format is useless without CSS definitions.
Finally, images can not be see if path is not specified.

If you want some help, it would be nice if you helps us.


Found the site you are playing with: http://diveintohtml5.info/storage.html
Check your cut and paste abilities.
If all else fails, you might try contacting the author.

[Mindphaser]

Originally Posted by jmrker

Difficult to test actions without HTML attached
Also, display format is useless without CSS definitions.
Finally, images can not be see if path is not specified.

If you want some help, it would be nice if you helps us.


Found the site you are playing with: http://diveintohtml5.info/storage.html
Check your cut and paste abilities.
If all else fails, you might try contacting the author.

thank you jmrker. I'm not a regular on these coding forums so I'm not sure what you're actually getting at. How was my cut and paste in error exactly?

I understand that I should have included a link to the author's code, thanks for doing that btw, but my basic problem was how and where to plug my variables into the author's code, and then where would I have the save function attached? (ie body tag onload event, save button, etc.)

Thanks btw

[Mindphaser]

ok after visiting w3schools.com again, this is what I'm thinking I need to do (or something like this, because this STILL isn't working):

function save_game() {

current_player = ""
current_player_len = document.player_turn_form.player_turn.length

for (i = 0; i <current_player_len; i++) {
if (document.player_turn_form.player_turn[i].checked) {
current_player = document.player_turn_form.player_turn[i].value;
}
}

if (current_player = "player_2"){
localStorage.setItem('current_player', 'player_2');}
else if (current_player = "player_3"){
localStorage.setItem('current_player', 'player_3');}
else if (current_player = "player_4"){
localStorage.setItem('current_player', 'player_4');}
else if (current_player = "player_5"){
localStorage.setItem('current_player', 'player_5');}
else if (current_player = "player_6"){
localStorage.setItem('current_player', 'player_6');}
else{
localStorage.setItem('current_player', 'player_1');}
}

function load_game() {

if (localStorage.getItem('current_player') == "player_2"){
document.player_turn_form.player_turn.selectedIndex = 1;}
else if (localStorage.getItem('current_player') == "player_3"){
document.player_turn_form.player_turn.selectedIndex = 2;}
else if (localStorage.getItem('current_player') == "player_4"){
document.player_turn_form.player_turn.selectedIndex = 3;}
else if (localStorage.getItem('current_player') == "player_5"){
document.player_turn_form.player_turn.selectedIndex = 4;}
else if (localStorage.getItem('current_player') == "player_6"){
document.player_turn_form.player_turn.selectedIndex = 5;}
else {
document.player_turn_form.player_turn.selectedIndex = 0;}
}

function reset_game() {

localStorage.removeItem('current_player');
}

MY FORM:
<!-----------Player Turn Form-------------->
<form name="player_turn_form" id="player_turn_form" onmousedown="DetermineRadioBox(playsound('Classic_Intercom_Whistle.mp3'))">
<tr height="50pt">
<td colspan="6" align="left" class="hand_cursor"><img src="images/spacer.png" align="absmiddle" height="1" width="36">

<input type="radio" name="player_turn" value="player_1" onclick="toggle_visibility_p1();" key="current_player_1">
<img src="images/spacer.png" align="absmiddle" height="1" width="29">

<input type="radio" name="player_turn" value="player_2" onclick="toggle_visibility_p2();" key="current_player_2">
<img src="images/spacer.png" align="absmiddle" height="1" width="28">

<input type="radio" name="player_turn" value="player_3" onclick="toggle_visibility_p3();" key="current_player_3">
<img src="images/spacer.png" align="absmiddle" height="1" width="27.5">

<input type="radio" name="player_turn" value="player_4" onclick="toggle_visibility_p4();" key="current_player_4">
<img src="images/spacer.png" align="absmiddle" height="1" width="28">

<input type="radio" name="player_turn" value="player_5" onclick="toggle_visibility_p5();" key="current_player_5">
<img src="images/spacer.png" align="absmiddle" height="1" width="28">

<input type="radio" name="player_turn" value="player_6" onclick="toggle_visibility_p6();" key="current_player_6">
</form>

Any help would be much appreciated.

[rnd me]

be aware that localStorage doesn't work on browsers from seven or fourteen years ago...

[Old Pedant]

This doesn't make sense:

localStorage.setItem('current_player_1', 'current_player');
localStorage.setItem('current_player_2', 'current_player');
localStorage.setItem('current_player_3', 'current_player');
localStorage.setItem('current_player_4', 'current_player');
localStorage.setItem('current_player_5', 'current_player');
localStorage.setItem('current_player_6', 'current_player');

You will set all those localStorage items to the *SAME STRING*. That is to 'current_player' They will *NEVER* be equal to "player_2" or "player_3", et al.

So later, if you go to get *any* of them, all you will get is that same thing, the *STRING* 'current_player'

SURELY you meant to assign the value of the variable current_player?

But even then I don't see why you'd assign the same value to all of them.

[rnd me]

i bet OP means to store the current player in localStorage (hence the radio):

for (i = 0; i <current_player_len; i++) {
  if (document.player_turn_form.player_turn[i].checked) {
         localStorage.current_player = document.player_turn_form.player_turn[i].value;
  }
}

[Old Pedant]

Makes sense. Except that from his load_game() function, it would appear that player_turn is a <select> and not a group of radio buttons. (Notice the selecteIndex.

If that's the case, then no loop is needed:

localStorage.current_player = document.player_turn_form.player_turn.selectedIndex;

And then this should be right, too:

function load_game() 
{
   var form = document.player_turn_form; // BAD BAD!  Named forms are obsolete!!
   form.player_turn.selectedIndex = localStorage.getItem("current_player");
}

Ehhh...he seems really really badly confused. On the one hand it looks like a set of radio buttons (.checked) but on the other hand it looks like a <select> (selectedIndex).

And then he is using a named <form> which is verboten in HTML5.

And and and...

I think he is trying to run before he has learned how to crawl. Looks like he has problems in his <form> and in his understanding of how to manipulate <form> elements, so he's really not ready for local storage.

[Mindphaser]

Thanks for your help, maybe I can clarify a little. Then I'll go check into some specifics with forms.

The form I used in my example above IS a set of 6 radio buttons, one for each player. When one is clicked, that player's token appears, the other 5 switch to hidden.

Saving this to local drive remembers the player turn for the next time the browser is opened. This is all.

Not sure how forms are called upon now in HTML5, I have to go investigate.

I only code as a hobby, and just my boardgame site (which probably will never go ONline because my coding skills are still questionable in alot of areas, but I only wanted to make the site to help me playtest a boardgame. So a save ability would be very handy)

I'm guessing I'll have to fully redesign the forms on my site to help implement the HTML5 which kind of sucks because there are several independant forms used, with many, many javascripts pertaining to them

Thanks again everyone. Feel free to add some more advice. I've already amended the code from my earlier post, so some earlier comments helped.

PS. the selectedIndex thing... yes (facepalm) just wrong. I have 2 little kids running around me playing and screaming while I code, so I have many distractions. I'll go back now to fix that.

[Mindphaser]

Originally Posted by rnd me

i bet OP means to store the current player in localStorage (hence the radio):

for (i = 0; i <current_player_len; i++) {
  if (document.player_turn_form.player_turn[i].checked) {
         localStorage.current_player = document.player_turn_form.player_turn[i].value;
  }
}

thanks rnd, this looked promising, but I get the following error:

- unable to set the value of the property 'current_player'

Could this problem have something to do with HTML5 not using the form "name" attribute?

[rnd me]

Originally Posted by Mindphaser

thanks rnd, this looked promising, but I get the following error:

- unable to set the value of the property 'current_player'

Could this problem have something to do with HTML5 not using the form "name" attribute?

i've never heard of that particular error before, but if you post the whole html page i bet we can collectively get it running. i think your'e probably pretty close to operation, probably something silly keeping it from working, but without seeing the whole thing, all we can do is speculate.

[Mindphaser]

OK I've dumbed it down a little (my site code is stupid huge) so here is the skinny on what I've been trying. And thanks guys again:

THE HTML:

<html>
<head>
	<title>Untitled</title>
<script type="text/javascript" src="data_storage_scripts.js">
</script>
</head>

<body bgcolor="#000000">
<form id="travel_barons_form">
	<fieldset>
		<fieldset>
			<input type="radio" name="player_turn" id="player_turn" value="player_1">
			<img src="images/spacer.png" align="absmiddle" height="1" width="29">
			
			<input type="radio" name="player_turn" id="player_turn" value="player_2">
			<img src="images/spacer.png" align="absmiddle" height="1" width="28">
			
			<input type="radio" name="player_turn" id="player_turn" value="player_3">
			<img src="images/spacer.png" align="absmiddle" height="1" width="27.5">
			
			<input type="radio" name="player_turn" id="player_turn" value="player_4">
			<img src="images/spacer.png" align="absmiddle" height="1" width="28">
			
			<input type="radio" name="player_turn" id="player_turn" value="player_5">
			<img src="images/spacer.png" align="absmiddle" height="1" width="28">
			
			<input type="radio" name="player_turn" id="player_turn" value="player_6">
			
<span name="Hidden Player" style="position: absolute; left: 50; top: 0; height: 400; width: 340; padding: 1em; visibility:hidden; z-index: 3;">
			<input type="radio" name="player_turn" id="player_turn" value="player_7" title="PLAYER 7"checked="checked">
</span>
		</fieldset>
	</fieldset>
<keygen name="current_player" form="travel_barons_form">
</form>
<a href="javascript: void(0)" onclick="save_game();"><font color="ffff00" size="6">SAVE</font></a>&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="load_game();"><font color="ffff00" size="6">LOAD</font></a>&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="reset_game();"><font color="ffff00" size="6">RESET</font></a>
</body>
</html>

THE SCRIPT:

function save_game() {

player_turn_len = document.travel_barons_form.player_turn.length

for (i = 0; i <player_turn_len; i++) {
  if (document.travel_barons_form.player_turn[i].checked) {
         player_turn_value = document.travel_barons_form.player_turn[i].value;
		 localStorage.current_player = "player_turn_value";
  }
}


}

function load_game() {

localStorage.getItem('current_player');
}

function reset_game() {

localStorage.removeItem('current_player');
}

If I can get this small script working, I'm sure I can extrapolate it to my site. I've done this dozens of times.

Not sure what's wrong now, even after updating my forms to match html5 form stucture.

[Old Pedant]

So if setItem seems to work for you just change

localStorage.current_player = "player_turn_value";

to

localStorage.setItem('current_player') = player_turn_value;

*STOP PUTTING QUOTES* AROUND VARIABLE NAMES!

One more time: "player_turn_value" is the *STRING* player_turn_value. AS IS. No substitution.

If you used that, then when you later did localStorage.getItem('current_player') all you would get is THAT SAME STRING. You would *NEVER* get values such as player_3 or player_5.

[Mindphaser]

Originally Posted by Old Pedant

So if setItem seems to work for you just change

localStorage.current_player = "player_turn_value";

to

localStorage.setItem('current_player') = player_turn_value;

*STOP PUTTING QUOTES* AROUND VARIABLE NAMES!

One more time: "player_turn_value" is the *STRING* player_turn_value. AS IS. No substitution.

If you used that, then when you later did localStorage.getItem('current_player') all you would get is THAT SAME STRING. You would *NEVER* get values such as player_3 or player_5.

Hmm... still getting an error that it can't get the value of the property 'player_turn'

[rnd me]

function save_game() {

	var turns = document.getElementsByName("player_turn");
	player_turn_len = turns.length

	for (var i = 0; i < player_turn_len; i++) {
		if (turns[i].checked) {
			localStorage.current_player = turns[i].value;
			break;
		} //end if
	} //next


} //end saveGame()

or you can use

document.forms.travel_barons_form.player_turn[i]

or you can use the ie8+ version to grab the value of the checked one:

document.querySelector("input[name=player_turn]:checked").value