重新加载后使用JavaScript操纵的DOM元素操纵或在分页上转到下一页

Question

我正在尝试在我的前端HTML页面上的网格和列表视图模式之间切换一个视图。我可以通过在两个容器之间切换“显示：无”来对DOM和HTML类操作进行操作。但是，当我转到下一个产品页面（通过分页）或重新加载页面时，默认视图是出现的视图，而不是最后一个切换的视图。如果页面重新加载或产品分页发生变化，有没有办法坚持这种视图？谢谢。

这是实现这一目标的DOM代码：

viewList.addEventListener('click', function() {
    this.classList.add('view__active');
    viewGrid.classList.remove('view__active');
    gridItem.classList.add('hidden');
    listItem.classList.remove('hidden');
});
viewGrid.addEventListener('click', function() {
    this.classList.add('view__active');
    viewList.classList.remove('view__active');
    gridItem.classList.remove('hidden');
    listItem.classList.add('hidden');
});

到目前为止，我发现我必须使用localstorage来实现这一目标。但是有更好的方法可以做到吗？

Answer 1

本质上，发生的事情是，当您从服务器请求某些内容时，服务器使用HTML文档响应，并且与该文档关联的任何脚本都运行，因此，在第一个请求中执行的任何JS都不是在第二个请求（paginate或paginate或重新加载）。

因此，您需要一种在这些页面加载中坚持信息的方法，为此，您有3个选项。

1. 使用 sessionstorage 。。

   。

2. 使用 localstorage localstorage

3. 使用 cookies 。

最简单的3个是使用选项1或2。

回复您的评论，

另外，如果我使用localstorage，我用什么来存储视图状态？

我不太清楚您所说的“您用来存储状态的内容”，如果您的问题是关于数据存储的位置，则不必担心它，因为这是由浏览器处理的。如果您的问题是关于如何存储它的“如何存储”，则可以通过选项1或2中的MDN文档。这只是存储键值对，如文档所示
localstorage.setItem（'PrefereDview'，'grid'）;您可以按以下单击处理程序将其添加到以下单击“处理程序”中，

viewList.addEventListener('click', function() {
    this.classList.add('view__active');
    viewGrid.classList.remove('view__active');
    gridItem.classList.add('hidden');
    listItem.classList.remove('hidden');
    localStorage.setItem('preferedView', 'grid');
});
viewGrid.addEventListener('click', function() {
    this.classList.add('view__active');
    viewList.classList.remove('view__active');
    gridItem.classList.remove('hidden');
    listItem.classList.add('hidden');
    localStorage.setItem('preferedView', 'list');
});

然后在脚本顶部加载新页面时，您可以获取用户PreveneDview （如果存在）通过const prefendview = localstorage.getItem（'preferedView'）;

这是一个完整的示例，来自 mdn

Answer 2

为了让任何人找到类似任务的答案，感谢 @umendra> @umendra Insight，我能够解决通过使用此信息：

function viewToggeler(viewBtn1, viewBtn2, view1, view2, viewStord) {
    viewBtn2.classList.add('view__active');
    viewBtn1.classList.remove('view__active');
    view1.classList.add('hidden');
    view2.classList.remove('hidden');
    sessionStorage.setItem('preferedView', viewStord);
}

viewList.addEventListener('click', () => {
    viewToggeler(viewGrid, viewList, gridItem, listItem, 'list');
});
viewGrid.addEventListener('click', () => {
    viewToggeler(viewList, viewGrid, listItem, gridItem, 'grid');
});

if (sessionStorage.getItem('preferedView') === 'grid') {
    viewToggeler(viewList, viewGrid, listItem, gridItem, 'grid');
} else if (sessionStorage.getItem('preferedView') === 'list') {
    viewToggeler(viewGrid, viewList, gridItem, listItem, 'list');
}

我最终在LocalStorage上使用了SessionStorage，因为它可以在窗口/选项卡关闭上清空，这可能是最可取的结果。即使退出浏览器并将其打开后，LocalStorage仍然存在。

另外，在任何时候，有人想在退出时清空SessionStorage，我使用了：

window.addEventListener('onbeforeunload', () => {
    sessionStorage.removeItem('preferedView');
});