Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    55
    Thanks
    26
    Thanked 0 Times in 0 Posts

    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:

    <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
    Last edited by Mindphaser; 02-14-2013 at 08:04 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    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.
    Last edited by jmrker; 02-14-2013 at 10:11 PM.

  • Users who have thanked jmrker for this post:

    Mindphaser (02-14-2013)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    55
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    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

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    55
    Thanks
    26
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Mindphaser; 02-15-2013 at 12:23 AM.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    be aware that localStorage doesn't work on browsers from seven or fourteen years ago...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    This doesn't make sense:
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mindphaser (02-15-2013)

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    i bet OP means to store the current player in localStorage (hence the radio):

    Code:
    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;
      }
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    Mindphaser (02-15-2013)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    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:
    Code:
    localStorage.current_player = document.player_turn_form.player_turn.selectedIndex;
    And then this should be right, too:
    Code:
    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.
    Last edited by Old Pedant; 02-15-2013 at 12:59 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mindphaser (02-15-2013)

  • #9
    New Coder
    Join Date
    Oct 2012
    Posts
    55
    Thanks
    26
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Mindphaser; 02-15-2013 at 02:53 AM.

  • #10
    New Coder
    Join Date
    Oct 2012
    Posts
    55
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    i bet OP means to store the current player in localStorage (hence the radio):

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

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by Mindphaser View Post
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    Mindphaser (02-15-2013)

  • #12
    New Coder
    Join Date
    Oct 2012
    Posts
    55
    Thanks
    26
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Mindphaser; 02-15-2013 at 07:04 PM.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    So if setItem seems to work for you just change
    Code:
    localStorage.current_player = "player_turn_value";
    to
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mindphaser (02-15-2013)

  • #14
    New Coder
    Join Date
    Oct 2012
    Posts
    55
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    So if setItem seems to work for you just change
    Code:
    localStorage.current_player = "player_turn_value";
    to
    Code:
    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'

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Code:
    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
    Code:
    document.forms.travel_barons_form.player_turn[i]
    or you can use the ie8+ version to grab the value of the checked one:
    Code:
    document.querySelector("input[name=player_turn]:checked").value
    Last edited by rnd me; 02-16-2013 at 08:54 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    Mindphaser (02-16-2013)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •