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.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript localStorage/save function?

    So i'm pretty new with Javascript and i'm just starting with something simple like an incremental browser game, you basically just click a button and the number counter goes up, and that number becomes currency you can use to buy upgrades that make it so that the number counter goes up by itself.

    The only thing I've been trying to figure out is how to make a save function/have all the data saved to a localStorage, so that when the page is refreshed or browser is closed, the numbers don't reset to 0.


    Here's part of the javascript code that i'm trying to store:


    Code:
    var cookies = 0;
    
    function cookieClick(number){
        cookies = cookies + number;
        document.getElementById("cookies").innerHTML = cookies;
    };
    
    var cursor = 0;
    
    function buyCursor(){                                            
        var cursorCost = Math.floor(10 * Math.pow(1.1,cursor));     //works out the cost of this cursor
        if(cookies >= cursorCost){                                   //checks that the player can afford the cursor
            cursor = cursor + 1;                                   //increases number of cursors
            cookies = cookies - cursorCost;                          //removes the cash spent
            document.getElementById('cursor').innerHTML = cursor;  //updates the number of cursors for the user
            document.getElementById('cookies').innerHTML = cookies;  //updates the cash number for the user
        };
        var nextCost = Math.floor(10 * Math.pow(1.1,cursor));       //works out the cost of the next cursor
        document.getElementById('cursorCost').innerHTML = nextCost;  //updates the cursor cost for the user
    };
    
    window.setInterval(function(){
        
        cookieClick(cursor);
        
        }, 1000);
    (the cookie variable is the variable being used for the number counter to go up)

    And heres the HTML for the buttons/number counter:


    Code:
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="interface.css" />
      </head>
      <body>
      
        <body bgcolor="#2E2E2E">
    
    
          <div style="text-align: center"> 
      <button onclick="cookieClick(1)"><font size=4>Click</font></button>
    
        <br />
        <font size="5" color="red">Cash: </font> <span id="cookies">0</span>
     <div>
        
            <br />
    <DIV style="position: absolute; top:370px; left:230px; width:300px; height:20px">
        <button onclick="buyCursor()">Buy Cursor</button>
        <br />
        Cursors: <span id="cursor">0</span>
        <br />
        Cursor Cost: <span id="cursorCost">10</span>
    
    <script type="text/javascript" src="main.js"></script>
      </body>
    </html>

    This is what I tried using to store the data to localStorage (but it obviously didn't work):
    Code:
    <script>
    // Check browser support
    if (typeof(Storage) != "undefined")
      // Store
      localStorage.cookies;
      // Retrieve
      {
      document.getElementById("cookies").innerHTML=localStorage.cookies;
      }
    else
      {
      document.getElementById("cookies").innerHTML="Sorry, your browser does not support Web Storage...";
      }
    </script>
    So my question is, how do i get this thing to work with the code i'm using (bare with me that i'm still a newby with javascript.

    Thanks

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    if you want to store the value of the variable cookies into the Storage with the key cookies you do:
    localStorage.cookies = cookies;
    localStorage.cookies just initiate a key in local storage named cookies

    typeof Storage equals "object" if the browser supports it

    it is not save to use multiple items with the same identifier, in your case: a variable and a key and an elements id.
    Make sure they are all different e.g.:
    cookieVar for the variable
    cookieStore for the key
    cookieSpan for the element

    furthermore: you cannot have anything between the ) and the { within an IF.
    you must move it outside the if statement. or inisde the {}'s

    I guess this is what you want:
    Code:
    if(typeof Storage=='object'){
    localStorage.CookieStore=CookieVar;
    document.getElementById("cookieSpan").innerHTML=localStorage.CookieStore;
    }else{
    document.getElementById("cookieSpan").innerHTML="Sorry, your browser does not support Web Storage...";
    }

  • Users who have thanked Lerura for this post:

    dyl1299 (03-22-2014)

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ahhh i get it now.

    Although I tried changing the identifiers of all of those but i'm not sure where to put the "cookieStore" one

    this is what i tried changing it and its giving me lots of errors:

    HTML:
    Code:
       <div style="text-align: center"> 
      <button onclick="cookieClick(1)"><font size=5>Click</font></button>
    
        <br />
        <font size="5" color="red">Cash: </font> <span id="cookieSpan">0</span>
     <div>
        <div>
    JS:
    Code:
    var cookieVar = 0;
    
    function cookieClick(number){
        cookieVar = cookieSpan + number;
        document.getElementById("cookieSpan").innerHTML = cookieSpan;
    };

    And with this when i click the "Click" button it gives me this: "[object HTMLSpanElement]" instead of a number
    and the console gives me this error: Uncaught TypeError: Cannot set property 'innerHTML' of null

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    As it is now cookieSpan is the id of the span to display the text in. but not a value
    it looks like you want to add a number to the value currently displayed, and then display the new result instead

    to get the value inside the span you need document.getElementById('cookieSpan').innerHTML;
    Since you add the number, the current value must be parsed into a number otherwise it adds the new number as text. ("10" + 10 = "1010" vs 10 + 10 = 20)

    Code:
    function cookieClick(number){
        cookieVar = parseFloat(document.getElementById('cookieSpan').innerHTML) + number;
        document.getElementById("cookieSpan").innerHTML = cookieVar;
    };

  • Users who have thanked Lerura for this post:

    dyl1299 (03-22-2014)

  • #5
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So where would the "cookieStore" part come in so that the local storage stores all of that data?
    Do I need to add in a new key somewhere for that to work?

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    cookieStore is the name I will suggest for the key in localStorage.
    localStorage.cookieStore = cookieVar.

    So that cookieVar is the variable that you modify through out the document.
    localStorage.cookieStore is the key that the data is stored under
    and document.getElementById('cookieSpan').innerHTML is the content of the displaying element

    Code:
    function cookieClick(number){
        cookieVar = parseFloat(document.getElementById('cookieSpan').innerHTML) + number; // read from element, and modify
        document.getElementById("cookieSpan").innerHTML = cookieVar; // display
        localStorage.cookieStore = cookieVar; // store
    }

  • #7
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So everything seems to be working alright except for loading the data in the storage, i checked the storage in the developer tools and data is there, but when i put this:


    Code:
    if(typeof Storage=='object'){
    localStorage.cookieStore = cookieVar;
    document.getElementById("cookieSpan").innerHTML=localStorage.cookieStore;
    }else{
    document.getElementById("cookieSpan").innerHTML="Sorry, your browser does not support Web Storage...";
    }
    in the javascript file and refresh the page, the number turns into "NaN" and the Click button stops working, so i'm a little confused here because the console isn't giving me any errors and the data is stored i know that for sure, it just doesn't wanna load into the webpage.

  • #8
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    html:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="interface.css" />
      </head>
        <body bgcolor="#02E2E2E">
          <div style="text-align: center"> 
      <button onclick="cookieClick(1)"><font size=4>Click</font></button>
        <br>
        <font size="5" color="red">Cash: </font> <span id="cookieSpan">0</span>
     <div>
                <br>
    <div style="position: absolute; top:370px; left:230px; width:300px; height:20px">
        <button onclick="buyCursor()">Buy Cursor</button>
        <br>
        Cursors: <span id="cursorSpan">0</span>
        <br>
        Cursor Cost: <span id="cursorCost">10</span>
    
    <script type="text/javascript" src="main.js"></script>
      </body>
    </html>
    main.js
    Code:
    var cookieVar = 0;
    var cursor = 0;
    
    function setStorage(){
    if(typeof Storage=='object'){
    localStorage.cookieStore = cookieVar;
    localStorage.cursorStore = cursor;
    document.getElementById("cookieSpan").innerHTML=localStorage.cookieStore;
    }else{
    document.getElementById("cookieSpan").innerHTML="Sorry, your browser does not support Web Storage...";
    }}
    
    function getStorage(){
    if(typeof Storage=='object'){
    if (localStorage.cookieStore){cookieVar  = parseInt(localStorage.cookieStore);}
    if (localStorage.cursorStore){cursor  = parseInt(localStorage.cursorStore);}
    }else{
    document.getElementById("cookieSpan").innerHTML="Sorry, your browser does not support Web Storage...";
    }}
    
    function cookieClick(number){
        cookieVar = cookieVar + number;
        document.getElementById("cookieSpan").innerHTML = cookieVar;
    setStorage();
    }
    
    function buyCursor(){                                            
        var cursorCost = Math.floor(10 * Math.pow(1.1,cursor));     //works out the cost of this cursor
        if(cookieVar >= cursorCost){                                   //checks that the player can afford the cursor
            cursor = cursor + 1;                                   //increases number of cursors
            cookieVar = cookieVar - cursorCost;                          //removes the cash spent
            document.getElementById('cursorSpan').innerHTML = cursor;  //updates the number of cursors for the user
            document.getElementById('cookieSpan').innerHTML = cookieVar;  //updates the cash number for the user
        };
        var nextCost = Math.floor(10 * Math.pow(1.1,cursor));       //works out the cost of the next cursor
        document.getElementById('cursorCost').innerHTML = nextCost;  //updates the cursor cost for the user
    setStorage();
    }
    
    getStorage();
    document.getElementById('cursorSpan').innerHTML = cursor;  //updates the number of cursors for the user
    document.getElementById('cookieSpan').innerHTML = cookieVar;  //updates the cash number for the user
        var nextCost = Math.floor(10 * Math.pow(1.1,cursor));       //works out the cost of the next cursor
        document.getElementById('cursorCost').innerHTML = nextCost;  //updates the cursor cost for the user
    
    window.setInterval(function(){
        
        cookieClick(cursor);
        
        }, 1000);
    the red part reads storage if any and updates the document.
    replace getStorage(); with setStorage() to reset the localStorage values


  •  

    Posting Permissions

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