JavaScript实现网格/列表视图切换，分页时视图状态无法保持

方法一：用 localStorage 持久化视图偏好 #

这种方式会把用户选择的视图状态存在浏览器本地，即使关闭页面再打开也能保留设置。

修改你的JS脚本，添加状态存储和页面初始化时的恢复逻辑：

// 页面加载时恢复之前保存的视图状态
$(document).ready(function() {
  const savedView = localStorage.getItem('currentView');
  if (savedView === 'grid') {
    $('#container ul').removeClass('list').addClass('auto-grid');
  } else if (savedView === 'list') {
    $('#container ul').removeClass('auto-grid').addClass('list');
  }
});

// 点击切换按钮时保存状态
$('button').click(function(e) {
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('list').addClass('auto-grid');
    localStorage.setItem('currentView', 'grid');
  } else if ($(this).hasClass('list')) {
    $('#container ul').removeClass('auto-grid').addClass('list');
    localStorage.setItem('currentView', 'list');
  }
});

方法二：用 URL 参数传递视图状态 #

如果需要分页跳转后（比如打开?page=2）仍保持视图状态，或者分享链接时让对方看到相同视图，可通过URL参数实现：

1. 切换视图时更新URL参数 #

$('button').click(function(e) {
  let viewType;
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('list').addClass('auto-grid');
    viewType = 'grid';
  } else if ($(this).hasClass('list')) {
    $('#container ul').removeClass('auto-grid').addClass('list');
    viewType = 'list';
  }

  // 更新URL参数，保留现有分页等参数
  const url = new URL(window.location.href);
  url.searchParams.set('view', viewType);
  window.history.pushState({}, '', url);
});

2. 页面加载时读取URL参数恢复状态 #

$(document).ready(function() {
  const urlParams = new URLSearchParams(window.location.search);
  const savedView = urlParams.get('view') || 'list'; // 默认使用列表视图

  if (savedView === 'grid') {
    $('#container ul').removeClass('list').addClass('auto-grid');
  } else {
    $('#container ul').removeClass('auto-grid').addClass('list');
  }
});

额外说明 #

• localStorage适合保存用户个人长期偏好，URL参数适合需要共享状态的场景。
• 如果你的分页是AJAX异步加载（页面不刷新），只需在AJAX加载完成后，根据当前保存的状态重新应用样式即可。

内容的提问来源于stack exchange，提问作者mario009