页面加载时localStorage.setItem()失效，排序功能无法执行求助

看起来你在尝试用localStorage保存排序逻辑并在页面加载后执行，但几个关键细节出了问题，我来帮你一步步修正：

问题分析 #

• 存储内容错误：你把"classSort()"这类带括号的字符串存在localStorage里，直接赋值给myWay后它只是个普通字符串，没法直接当作函数执行。而且你连续三次调用setItem，最后只会保留最后一次的"ratingSort()"，前面的设置直接被覆盖了。
• 默认值判断逻辑失效：当current_sort不存在于localStorage时，localStorage.getItem("current_sort")返回的是null，不是空字符串""，所以你的if (myWay === "")永远不会触发，默认值playerSort()根本不会生效。
• 缺少页面加载时机绑定：你没有明确指定“页面加载完成、body渲染后”的执行时机，可能会在DOM还没准备好的时候就执行排序，导致操作无效。

修正方案 #

1. 正确存储排序函数标识 #

不要存储带括号的函数调用字符串，而是存储函数的名称（比如"classSort"），这样后续可以通过名称找到对应的函数：

// 注意：不要连续三次调用setItem，应该根据用户的实际操作（比如点击排序按钮）来设置
// 示例：用户选择按class排序时执行
localStorage.setItem("current_sort", "classSort");
// 用户选择按player排序时执行
localStorage.setItem("current_sort", "playerSort");
// 用户选择按rating排序时执行
localStorage.setItem("current_sort", "ratingSort");

2. 绑定页面加载事件并执行排序 #

在DOM完全渲染完成后读取存储的标识，找到对应的函数执行，同时修正默认值逻辑：

// 监听DOM加载完成事件，确保body渲染后再执行
document.addEventListener('DOMContentLoaded', function() {
  const sortKey = localStorage.getItem("current_sort");
  let myWay;

  // 检查存储的标识是否对应一个存在的函数
  if (sortKey && typeof window[sortKey] === 'function') {
    myWay = window[sortKey];
  } else {
    // 没有有效标识时，使用默认排序函数
    myWay = playerSort;
    // 顺便把默认值存回localStorage，下次加载直接生效
    localStorage.setItem("current_sort", "playerSort");
  }

  // 执行排序逻辑
  myWay();
});

3. 确保排序函数全局可访问 #

要保证classSort、playerSort、ratingSort是全局函数（挂载在window对象上），这样上面的window[sortKey]才能找到它们：

// 全局定义排序函数示例
function classSort() {
  // 你的按class排序逻辑
  console.log('执行class排序');
}

function playerSort() {
  // 你的按player排序逻辑
  console.log('执行player排序');
}

function ratingSort() {
  // 你的按rating排序逻辑
  console.log('执行rating排序');
}

额外优化提示 #

如果担心函数名拼写错误，可以用一个对象来映射标识和函数，这样更安全：

const sortFunctions = {
  classSort,
  playerSort,
  ratingSort
};

// 读取时改用对象查找
const sortKey = localStorage.getItem("current_sort");
const myWay = sortFunctions[sortKey] || playerSort;

这样就能确保在页面加载完成、body渲染好之后，正确执行你选择或默认的排序逻辑啦！

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