在窗口

Question

我正在从Desktop .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);

  }
});

Answer 1

在这里，我会这样做，因为他最初打了我几秒钟（我投了赞成票）并扩大了。从会话到会话，变量不会在浏览器中保留。你需要cookies或localStorage。

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

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

我会说，在前端会话令牌之外的存储轻轻踩，它可能会非常快速地变得混乱并且非常非网络化。您如何确保数据不会过时，如果进行了修改怎么办？你有多长时间没有刷新数据，当你得到大量用户时，如果他们没有擦除他们的缓存，你让他们存储了x长度的东西，那么你将要运行多长时间进入这个，这是一个基本的设计缺陷。即使您每隔几分钟刷新一次数据，当您进行永久性扩展时，您也会遇到数据冲突。决定你是否真的，真的，真的需要存储在（和每个）用户的机器上。