刷新页面时保持我的选择

Question

所以我环顾四周，没有关于将数据收集存储在网页上的内容，所以如果我刷新所述页面，它仍然会包含我之前选择的所有内容。我想在我的网站上实现这个功能。

如果我选择了其中一个选项，它会过滤到所述选项但我希望该选项在刷新网站时保存在我的页面上。无论如何都要这样做???

Answer 1

有很多方法可以做到这一点。

首先，您可以将其保存在服务器上，但这需要很多资源成本，而且在大多数情况下都不是很好的解决方案。

对于此问题，在客户端上存储此信息的最佳方法。您可以使用cookie，会话存储和本地存储等内容。 我认为会话和本地存储是最适合您的目的。它们之间的区别会话存储保存当前sessin的信息 - 浏览器窗口，在浏览器窗口关闭后丢失。本地存储完全适用于浏览器，在玩家和存储之后丢失（手动）。因此，在当前的计算机和浏览器本地存储将保存信息，直到它直接清除））

你也可以使用查询字符串，但这是不好的解决方案。

您可以在互联网上轻松找到有关localstorage的更多信息。像angularjs这样流行的框架也有管理本地和会话存储工作的服务）

Answer 2

获得所需内容的最简单方法是LocalStorage，这是大多数网络浏览器都支持的功能。

javascript中的API看起来像这样：

function onClick(){
  localStorage.setItem('selectedRole', role);
}

在页面上加载：

$( document ).ready(function() {
    selectedRole = localStorage.getItem('selectedRole')
});

您可能应该编辑一些代码以满足您的需求，这就是我猜您实现应用程序的方式。

Answer 3

在您的情况下，sessionStorage是最佳选择，因为您只需要保持刷新。在页面关闭时，数据将丢失。

使用以下方式将数据存储在页面刷新中

window.onbeforeunload = function () {
  sessionStorage.setItem('selectedFilter', selectedFilterData);
};

使用以下方式检索页面加载数据：

window.onload = function () {
  var selectedFilter = sessionStorage.getItem('selectedFilter');
  if(selectedFilter !== null) {
       //set the selections
  }
};