可直接用 localStorage 存储排序字段、方向及作用范围标识（如 search_sort_product），页面加载时读取并自动应用，确保关闭再打开仍保持上次排序；用户切换时立即保存并刷新数据。
可以直接用 localStorage 存储用户选择的排序字段和顺序，页面加载时读取并自动应用到搜索结果列表上，实现“关掉再打开还是上次的排序”效果。
明确要存哪些排序信息
一次完整的排序配置通常包含三项：
- 排序字段：比如 "price"、"date"、"relevance"
- 排序方向：比如 "asc" 或 "desc"
-
作用范围标识（可选但推荐）：如区分商品页、文章页，避免互相覆盖，可用键名体现，例如
"search_sort_shop"或"search_sort_blog"
保存排序选择
当用户点击排序按钮（如“价格从低到高”、“最新发布”）时，立即将配置写入 localStorage：
- 把字段和方向组合成一个轻量对象，例如
{ field: "price", order: "asc" } - 用
JSON.stringify()转为字符串再存储，确保结构完整 - 加上 try/catch 防止隐私模式等异常场景中断脚本
示例代码：
立即学习“前端免费学习笔记（深入）”；
function saveSortConfig(config, scope = 'default') {
try {
localStorage.setItem(`search_sort_${scope}`, JSON.stringify(config));
} catch (e) {
console.warn('排序配置保存失败', e);
}
}
// 用户点击“按销量降序”
saveSortConfig({ field: 'sales', order: 'desc' }, 'product');
页面加载时恢复排序
在 DOM 就绪后（如 DOMContentLoaded），读取并还原 UI 状态与数据请求逻辑：
- 用
getItem()读取，再用JSON.parse()还原对象 - 若解析失败或无值，回退到默认排序（如
{ field: 'relevance', order: 'desc' }） - 同步更新按钮高亮、下拉选中项，并立即触发一次结果刷新（避免界面和数据不一致）
示例代码：
立即学习“前端免费学习笔记（深入）”；
function loadSortConfig(scope = 'default') {
const key = `search_sort_${scope}`;
const saved = localStorage.getItem(key);
try {
return saved ? JSON.parse(saved) : { field: 'relevance', order: 'desc' };
} catch {
return { field: 'relevance', order: 'desc' };
}
}
// 页面加载后
document.addEventListener('DOMContentLoaded', () => {
const config = loadSortConfig('product');
applySortUI(config); // 比如给对应按钮加 active 类
fetchSearchResults({ sort: config }); // 请求带排序参数的数据
});
配合搜索行为保持一致性
排序配置应与搜索上下文联动，而不是孤立存在：
- 每次发起新搜索时，优先使用已保存的排序配置，而非重置
- 用户手动切换排序后，除了更新 UI 和存储，也应立刻重新拉取数据（调用
refreshData()或类似方法） - 如支持多标签页操作，可监听
storage事件，在其他标签页修改后同步当前页状态
