I have 6 tabs. But when you switch from 1 tab to another tab the data from the previous tab is lost. How do I use the session storage object to prevent this?

Ive tried messing around with sessionstorage but im new at this and im not sure how to format it correctly.

My Html code:

 <!Doctype html>
<html>

<head>
    <title> Basic Clicker</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="nav_bar">
        <ul>
           <li><a href="GameMainWindow.html" id="onlink">Home</a></li>
           <li><a href="SkillTree.html">SkillTree</a></li>
           <li><a href="Equipment.html">Equipment</a></li>
           <li><a href="Pets.html">Pets</a></li>
           <li><a href="Skills.html">Skills</a></li>
           <li><a href="Quests.html">Quests</a></li>
       </ul>
   </div>
   <div class="main_container">
       <p>
           <html>

           <head>
               <link rel="stylesheet" type="text/css" href="interface.css" 
   />
                 </head>
               <title> Basic Clicker</title>

           <body>
               <style>
                   div,
                  a {
                       text-align: center;
                   }

               </style>
               <span id="cookies">0</span>
               <br />
               <span id="rebirths">0</span>
               <br />
               <button onclick="cookieClick()">Click Me!</button>
               <br />
               Cost: 10mp <button id="BigClickBtn" 
     onclick="Bigclick()">BigClick</button>
               <br />
                Cost: <span id="cursorCost">10</span> <button 
   id="cursorCostBtn" onclick="buyCursor()">Buy Cursor</button>
               <br />
               Cost: <span id="catCost">50</span> <button 
    onclick="buyCat()" id="catCostBtn">Buy Cat</button>
               <br />
               Cost: <span id="dogCost">100</span> <button 
   onclick="buyDog()" id="dogCostBtn">Buy Dog</button>
               <br />
               Cost: <span id="humanCost">200</span> <button 
   onclick="buyHuman()" id="humanCostBtn">Buy Human</button>
               <br />
               Cost: <span id="rebirthCost">10</span> <button 
   onclick="buyRebirth()" id="rebirthCostBtn">Rebirth</button>
               <br />
               Hp:<span id="HitPoints">0</span> Mp:<span 
   id="ManaPoints">0</span> 

            </body> 

Html code for 2nd tab:

<!Doctype html>
<html>

  <head>
   <title> Basic Clicker</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="nav_bar">
        <ul>
            <li><a href="GameMainWindow.html">Home</a></li>
            <li><a href="SkillTree.html" id="onlink">SkillTree</a></li>
            <li><a href="Equipment.html">Equipment</a></li>
             <li><a href="Pets.html">Pets</a></li>
            <li><a href="Skills.html">Skills</a></li>
            <li><a href="Quests.html">Quests</a></li>
        </ul>
     </div>
     <div class="main_container">
        <p>
            <html>

            <head>
            <link rel="stylesheet" type="text/css" href="interface.css" />
            </head>
             <title> Basic Clicker</title>

        <body>
            <style>
                div,
                a {
                    text-align: center;
                }

            </style>
            Skill Tree &nbsp; &nbsp; SP: <span id="SkillPoints">0</span>
            <br />
            <br />
            <button id="SkillPoints" onclick="Hp up()">Hp up</button> &nbsp; <button id="SkillPoints" onclick="Mp up()">Mp up</button>
            <br />
            <button id="SkillPoints" onclick="Hp up()">Hp regen</button>
            &nbsp;
            <button id="SkillPoints" onclick="Strength up()">Str up</button> &nbsp;
            <button id="SkillPoints" onclick="Mp regen()">Mp regen</button>
            <br />
            <button id="SkillPoints" onclick="()">Passive skill</button> &nbsp; <button id="SkillPoints" onclick="Hp up()">Passive skill</button> &nbsp; <button id="SkillPoints" onclick="Hp up()">Passive skill</button> &nbsp; <button id="SkillPoints" onclick="Hp up()">Passive skill</button> &nbsp;
            <br />

            <script type="text/javascript" src="main.js"></script>
        </body>

        </html>

                </p>
</div>

JavaScript for first page:

`var cookies = 0;

function cookieClick() {
    cookies = cookies + Strength;
    document.getElementById("cookies").innerHTML = cookies;
    checkCursor()
}
///var UP_INTERVAL = 1000; 
///setInterval(cookieClick, UP_INTERVAL);


function Bigclick() {
    if (ManaPoints >= 10 && rebirths >= 1) {
        cookies = cookies + 50
        ManaPoints = ManaPoints - 10;
        document.getElementById('cookies').innerHTML = cookies;
        document.getElementById("ManaPoints").innerHTML = ManaPoints;
    }
    checkCursor()
}

var cursors = 0;

function buyCursor() {
    var cursorCost = Math.floor(10 * Math.pow(1.1, cursors)); //works out 
the cost of this cursor
if (cookies >= cursorCost) { //checks that the player can afford the cursor
    cursors = cursors + 1; //increases number of cursors
    cookies = cookies - cursorCost; //removes the cookies spent
    document.getElementById('cursors').innerHTML = cursors; //updates the number of cursors for the user
    document.getElementById('cookies').innerHTML = cookies; //updates the number of cookies for the user
}
var nextCost = Math.floor(10 * Math.pow(1.1, cursors)); //works out the cost of the next cursor
document.getElementById('cursorCost').innerHTML = nextCost; //updates the cursor cost for the user

}

var cats = 0;

function buyCat() {
    var cursorCost = Math.floor(50 * Math.pow(1.1, cats)); //works out the 
 cost of this cursor
   if (cookies >= cursorCost) { //checks that the player can afford the 
cursor
       cats = cats + 2; //increases number of cursors
        cookies = cookies - cursorCost; //removes the cookies spent
      document.getElementById('cats').innerHTML = cats; //updates the 
number of cursors for the user
       document.getElementById('cookies').innerHTML = cookies; //updates 
   the number of cookies for the user
      }
       var nextCost = Math.floor(10 * Math.pow(1.1, cats)); //works out 
the  
    cost of the next cursor
        document.getElementById('cursorCost').innerHTML = nextCost; 
//updates 
    the cursor cost for the user
    }

var rebirths = 0;
var HitPoints = 0;
var ManaPoints = 0;
var SkillPoints = 0;
var Strength = 1;

function buyRebirth() {
    var rebirthCost = Math.floor(10 * Math.pow(1.1, rebirths));
   if (cookies >= rebirthCost && rebirths < 1) {
    cookies = cookies - rebirthCost
    HitPoints = HitPoints + 10;
    ManaPoints = ManaPoints + 10;
    SkillPoints = SkillPoints + 1;
    rebirths = rebirths + 1;
    document.getElementById("rebirths").innerHTML = rebirths;
    document.getElementById('cookies').innerHTML = cookies;
    document.getElementById("HitPoints").innerHTML = HitPoints;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
    document.getElementById("rebirthCost").innerHTML = rebirthCost;
    document.getElementById("SkillPoints").innerHTML = SkillPoints;
}
if (cookies >= rebirthCost)
    if (rebirths >= 1) {
        cookies = cookies - rebirthCost
        rebirths = rebirths + 1;
        SkillPoints = SkillPoints + 1;
        document.getElementById('cookies').innerHTML = cookies;
        document.getElementById("rebirthCost").innerHTML = rebirthCost;
        document.getElementById("rebirths").innerHTML = rebirths;
        document.getElementById("SkillPoints").innerHTML = SkillPoints;

    }
var nextCost5 = Math.floor(10 * Math.pow(1.1, rebirths));
document.getElementById('rebirthCost').innerHTML = nextCost5;

}


function HitPointsup() {
    if (SkillPoints > 0 && rebirths >= 1) {
        SkillPoints = SkillPoints - 1;
        HitPoints = HitPoints + 10;
    }
    document.getElementById('SkillPoints').innerHTML = SkillPoints;
    document.getElementById("HitPoints").innerHTML = HitPoints;
}

 function ManaPointsup() {
    if (SkillPoints > 0 && rebirths >= 1) {
        SkillPoints = SkillPoints - 1;
        ManaPoints = ManaPoints + 10;
    }
    document.getElementById('SkillPoints').innerHTML = SkillPoints;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
}

function Strengthup() {
    if (SkillPoints > 0 && rebirths >= 1) {
        SkillPoints = SkillPoints - 1;
        Strength = Strength + 0.5;
    }
    document.getElementById('SkillPoints').innerHTML = SkillPoints;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
}



function checkCursor() {
    if (cookies <= 9) {
        document.getElementById("cursorCostBtn").disabled = true;
} else {
    document.getElementById("cursorCostBtn").disabled = false;
}

if (cookies <= 49) {
    document.getElementById("catCostBtn").disabled = true;
} else {
    document.getElementById("catCostBtn").disabled = false;
}

if (cookies <= 99) {
    document.getElementById("dogCostBtn").disabled = true;
} else {
    document.getElementById("dogCostBtn").disabled = false;
}

if (cookies <= 199) {
    document.getElementById("humanCostBtn").disabled = true;
} else {
    document.getElementById("humanCostBtn").disabled = false;
}

if (cookies <= 9) {
    document.getElementById("rebirthCostBtn").disabled = true;
} else {
    document.getElementById("rebirthCostBtn").disabled = false;
}

if (rebirths < 1) {
    document.getElementById("BigClickBtn").disabled = true;
} else {
    document.getElementById("BigClickBtn").disabled = false;
}
}

Heres like a screenshot of my tabs ( not sure how to sue the image uploader) http://prntscr.com/nwho6t http://prntscr.com/nwho8x http://prntscr.com/nwhoax my 10 button clicks went away

I expect when i change tabs for the data to be saved in session storage for now then later i want to change it to local storage(when im done). But the actual output changing tabs reset progress.

1 Answers

1
Water Cooler v2 On

There are three problems with your question and the accompanying code.

Problems with the code you posted:

  1. The HTML is not well-formed. You have a <head> and <body> tag, i.e. a whole HTML document nested inside of the outer <body> tag. Fix that first.

  2. The JavaScript you posted is not using sessionStorage anywhere at all.

Problem with your question:

  1. You seem to want someone to fix your code. That's not going to happen because your code is incomplete and irrelevant to your question.

General advise and solution that addresses your question:

The sessionStorage does not persist data across tabs even within the same browser process. So, don't use it to store session related data. Instead, use plain old cookies.

Check this video out: Warning: Don't count on the HTML5 window.sessionStorage for storing session related data