Html5 storage help

Dev Shed Forums Sponsor:

February 14th, 2013, 12:56 PM

Mindphaser

Registered User

Join Date: Oct 2012

Posts: 23

Time spent in forums: 4 h 47 m 16 sec
Reputation Power: 0

Html5 storage help

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:

Author's code and game here:
http://diveintohtml5.info/examples/localstorage-halma.html

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

<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

February 14th, 2013, 06:05 PM

Mindphaser

Registered User

Join Date: Oct 2012

Posts: 23

Time spent in forums: 4 h 47 m 16 sec
Reputation Power: 0

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"){
localStorage.setItem('current_player', 'player_2');}
else if (current_player = "player"){
localStorage.setItem('current_player', 'player_3');}
else if (current_player = "player"){
localStorage.setItem('current_player', 'player_4');}
else if (current_player = "player"){
localStorage.setItem('current_player', 'player_5');}
else if (current_player = "player"){
localStorage.setItem('current_player', 'player_6');}
else{
localStorage.setItem('current_player', 'player_1');}
}

function load_game() {

if (localStorage.getItem('current_player_2') == "player_2"){
document.player_turn_form.player_turn.selectedIndex = 1;}
else if (localStorage.getItem('current_player_3') == "player_3"){
document.player_turn_form.player_turn.selectedIndex = 2;}
else if (localStorage.getItem('current_player_4') == "player_4"){
document.player_turn_form.player_turn.selectedIndex = 3;}
else if (localStorage.getItem('current_player_5') == "player_5"){
document.player_turn_form.player_turn.selectedIndex = 4;}
else if (localStorage.getItem('current_player_6') == "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:

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

February 15th, 2013, 01:01 PM

Mindphaser

Registered User

Join Date: Oct 2012

Posts: 23

Time spent in forums: 4 h 47 m 16 sec
Reputation Power: 0

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:

Code:



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

Code:


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.

February 15th, 2013, 08:38 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 601

Time spent in forums: 1 Week 1 Day 13 h 25 m 38 sec
Reputation Power: 69

Ok, the way you had it set-up; you were trying to get the current_player value with the form's name, but your form did not have a name... it had an id.

So here is a demo, for you to learn from:

Code:

<!doctype html>
<html>
<head>

	<title>Untitled</title>

<script>

var cp;

function save_game()
{
var 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) {
  var player_turn_value = document.travel_barons_form.player_turn[i].value;
   localStorage.current_player = player_turn_value;
  }
 }
}

function load_game()
{
cp = localStorage.getItem('current_player');
if (cp != null) {
  alert(cp);
 }
else {
  alert("You Have Not Saved Anything Yet.");
 }
}

function reset_game()
{
cp = localStorage.removeItem('current_player');
if (cp == undefined) {
  alert("Storage Has Been Erased!");
 }
}

</script>

</head>
<body bgcolor="#000000">

<form name="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>

Last edited by web_loone08 : February 15th, 2013 at 10:00 PM.

Html5 storage help

Developer Shed Advertisers and Affiliates