object contents lost when opening new page within window

Question

I am making the transition over from Desktop .NET development to Web Development and I have just run into something that I don't understand. I was under the impression that when defining global variables if you opened a new webpage in the sane session the variable would still be accessible in memory to prevent the need to reload it. Can someone please clarify this matter?

I am loading a JSON database into memory as an array of objects var PlayerDatabase . I created an intelligent search bar to select a player and open a page with information about them. When opening the new page the PlayerDatabase is undefined .

Initial Search Bar page :

 /* window.fn = {}; var playerDatabase = []; var count = 0; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var menu = document.getElementById('menu'); var navi = document.getElementById('navi'); menu.close(); navi.resetToPage(page, { animation: 'fade' }); }; // Data Load Event function showModal() { var modal = document.querySelector('ons-modal'); modal.show(); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { playerDatabase = JSON.parse(this.responseText); count = $(playerDatabase).toArray().length; modal.hide(); console.log(count); } }; var requestURL = 'dataURL'; xmlhttp.open("GET", requestURL, true); xmlhttp.send(); } */ // Search Bar Filter Logic function searchPlayers() { var input, filter, ul, li, a, i; input = document.getElementById("searchBarInput"); filter = input.value.toUpperCase(); div = document.getElementById("dropdownItems"); li = div.getElementsByTagName("li"); // remove all current items for (i = li.length - 1; i > -1; i--) { div.removeChild(li[i]); } // check for min length if (filter.length < 3) { $('#dropdownItems').append("<li><a>Please input at least 3 characters.</a></li>"); } else { // Here I add filtered items to the drop dwon $('#dropdownItems').append("<li><a href='playerPage.html?playerID=" + "playerID" + "'>" + "Player Name" + " - " + "Player Position" + "</a></li>"); } } // Search Bar focus lost $(document).on("focusout", "#searchBarInput input", function() { var div = document.getElementById("dropdownItems"); var li = div.getElementsByTagName("li"); // remove all current items for (i = li.length - 1; i > -1; i--) { div.removeChild(li[i]); } }); 

 /* * Copyright (c) 2012 Thibaut Courouble * Licensed under the MIT License ================================================== */ a { color: #1e7ad3; text-decoration: none; font-size: 12px; } a:hover { text-decoration: underline } input { font-size: 13px; color: #555860; } .search { position: relative; margin: 0 auto; } .search input { height: 26px; width: 100%; padding: 0 12px 0 25px; background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; border-width: 1px; border-style: solid; border-color: #a8acbc #babdcc #c0c3d2; border-radius: 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; } .search input:focus { outline: none; border-color: #66b1ee; -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); } .search input:focus+.results, .search .results:hover { display: block } .search .results { display: none; position: absolute; top: 35px; left: 0; right: 0; z-index: 10; padding: 0; margin: 0; border-width: 1px; border-style: solid; border-color: #cbcfe2 #c8cee7 #c4c7d7; border-radius: 3px; background-color: #fdfdfd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4)); background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4); background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4); background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4); background-image: -o-linear-gradient(top, #fdfdfd, #eceef4); background-image: linear-gradient(top, #fdfdfd, #eceef4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .search .results li { display: block; } .search .results li:first-child { margin-top: -1px } .search .results li:first-child:before, .search .results li:first-child:after { display: block; content: ''; width: 0; height: 0; position: absolute; left: 50%; margin-left: -5px; border: 5px outset transparent; } .search .results li:first-child:before { border-bottom: 5px solid #c4c7d7; top: -11px; } .search .results li:first-child:after { border-bottom: 5px solid #fdfdfd; top: -10px; } .search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none } .search .results li:last-child { margin-bottom: -1px } .search .results a { display: block; position: relative; margin: 0 -1px; padding: 6px 40px 6px 10px; color: #808394; text-color: #808394; font-weight: 500; text-shadow: 0 1px #fff; border: 1px solid transparent; border-radius: 3px; } .search .results a span { font-weight: 200 } .search .results a:before { content: ''; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px; background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; } .search .results a:hover { text-decoration: none; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); border-color: #2380dd #2179d5 #1a60aa; background-color: #338cdf; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf)); background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf); background-image: -moz-linear-gradient(top, #59aaf4, #338cdf); background-image: -ms-linear-gradient(top, #59aaf4, #338cdf); background-image: -o-linear-gradient(top, #59aaf4, #338cdf); background-image: linear-gradient(top, #59aaf4, #338cdf); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); } :-moz-placeholder { color: #a7aabc; font-weight: 200; } ::-webkit-input-placeholder { color: #a7aabc; font-weight: 200; } .lt-ie9 .search input { line-height: 26px } 

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <!-- Page Content --> <header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home"> <img class="w3-image w3-black" src="http://www.sportssabermetrics.net/html/images/header_image.jpg" alt="Header Image" width="100%"> <div class="w3-display-middle w3-center" style="width:60%;"> <!-- Search Bar --> <section class="main"> <div id="myDropdown" style="margin: auto; font-size: 14px;"> <form class="search" method="post"><input type="text" id="searchBarInput" placeholder="Search for NFL Player" onkeyup="searchPlayers()" /> <ul id="dropdownItems" class="results"> </ul> </div> </section> </div> </header> </body> 

Seperate Javascript file to handle New Page

// Load full HTML page prior to making calls
$(function() {
  // check to see if data has loaded
  if (count > 0) {
       // query URL parameters
    var url_string = window.location.href;
    var url = new URL(url_string);
    var c = url.searchParams.get("playerID");

    var player;

    for (i=0; i < count; i++) {
        if (playerDatabase[i].playerID = c) {
            player = playerDatabase[i];
            { break; }
        }
    }

  } else {
      // Load Data
      showModal();

    console.log(count);

  }
});

Answer 1

Here I'll do it since he originally beat me by a couple seconds (I upvoted) and expand. Variables do not persist in the browser from session to session. you need cookies or localStorage for that.

HOWEVER, note there are differences between the two. If you are planning to support a wide variety of browsers and users, you'll need to check that local storage is available or else your user will be toast. If you are planning on sending this data ever back to the server, then cookies is still the preferred method if you really need it to persist.

I, like you, moved from ASP .Net into the web, and something to consider is, do you really need the front end to remember and store this data? For some things that is a security issue as well. Many times it can actually be preferable to pass the data you need back and forth, and when you are done it's disposed rather than physically caching it. I would argue in full web you should be polling for data every page load from the server even if it's redundant. That way you control what the user has, the front end is dumb, and you are sure the data is not tampered with which becomes very important...

I would say, tread lightly with storage outside of session tokens etc on the front end, it can get to be a mess very quickly and is very un-webby. How are you going to insure that the data is not stale, what if modifications are made? How long are you going to have the data persist without a refresh, when you get a large number of users, if they don't wipe their cache and you let them store something for x-length of time, you're going to run into this and it's a fundamental design flaw. Even if you refresh the data every few minutes, when you get to scale that is an eternity and you will get data conflicts. Decide if you really, really, really need this stored on the (and each) user's machine.