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

Question

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

我正在将一个 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);

  }
});

Answer 1

在这里我会这样做，因为他最初比我快了几秒钟(我赞成)并展开。变量不会在浏览器中从一个 session 持续到另一个 session 。为此，您需要 cookie 或 localStorage。

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

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

我会说，在前端小心处理 session token 等之外的存储，它很快就会变得一团糟，而且非常不灵活。您将如何确保数据不会过时，如果进行了修改怎么办？如果你有大量用户，如果他们不删除他们的缓存并且你让他们存储一些东西 x 长的时间，你将在没有刷新的情况下保留多长时间，你将运行进入这个，这是一个基本的设计缺陷。即使您每隔几分钟刷新一次数据，当您扩展到永恒时，您也会遇到数据冲突。确定您是否真的、真的、真的需要将其存储在(和每个)用户的机器上。