在窗口中打开新页面时对象内容丢失答案

【问题标题】：object contents lost when opening new page within window在窗口中打开新页面时对象内容丢失
【发布时间】：2018-02-22 20:33:56
【问题描述】：

我正在从桌面 .NET 开发过渡到 Web 开发，但我遇到了一些我不理解的东西。我的印象是，在定义全局变量时，如果您在健全的会话中打开一个新网页，该变量仍然可以在内存中访问，以防止需要重新加载它。有人可以澄清一下吗？

我正在将 JSON 数据库作为对象数组 var PlayerDatabase 加载到内存中。我创建了一个智能搜索栏来选择一个玩家并打开一个包含他们信息的页面。打开新页面时，PlayerDatabase 是 undefined。

初始搜索栏页面：

/*
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>

单独的 Javascript 文件来处理新页面

// 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);

  }
});

【问题讨论】：

变量不会在浏览器中从一个会话持续到另一个会话。为此，您需要 cookie 或 localStorage
好吧，我不觉得自己很愚蠢......请继续阅读：hacks.mozilla.org/2009/06/localstorage 你能回答这个问题，以便我给你荣誉吗？

标签： javascript json

【解决方案1】：

在这里我会这样做，因为他最初以几秒钟的优势击败了我（我赞成）并扩大。变量不会在浏览器中从一个会话持续到另一个会话。为此，您需要 cookie 或 localStorage。

但是，请注意两者之间存在差异。如果您计划支持各种浏览器和用户，则需要检查本地存储是否可用，否则您的用户将被烤面包。如果您打算将此数据发送回服务器，那么如果您确实需要持久保存 cookie，那么 cookie 仍然是首选方法。

我和你一样，从 ASP .Net 迁移到 Web，需要考虑的是，你真的需要前端来记住和存储这些数据吗？对于某些也是安全问题的事情。很多时候，实际上最好来回传递您需要的数据，当您完成后，它会被丢弃而不是物理缓存它。我会在完整的网络中争辩说，即使它是冗余的，您也应该从服务器加载每个页面来轮询数据。这样您就可以控制用户拥有的东西，前端是愚蠢的，并且您确定数据不会被篡改，这变得非常重要......

我想说的是，在前端的会话令牌等之外的存储要轻而易举，它很快就会变得一团糟并且非常不可靠。您将如何确保数据不会过时，如果进行了修改怎么办？当您获得大量用户时，如果他们不擦除缓存并且您让他们将某些内容存储 x 长的时间，您将在不刷新的情况下保留数据多长时间，您将运行对此，这是一个基本的设计缺陷。即使您每隔几分钟刷新一次数据，当您扩大规模时，这就是永恒的，您将遇到数据冲突。确定您是否真的，真的，真的需要将其存储在（和每个）用户的机器上。

【讨论】：