Angular6中页面刷新后如何保留localStorage选中列数据？

我帮你排查了代码里的几个关键问题，这些问题导致刷新后选中的列数据无法正确加载：

• localStorage 键名不匹配：你存储选中列时用的键是"column_selections"，但读取时却写成了"_selections"，这直接导致无法读取到之前保存的数据。
• 键名包含无效空格：存储listData时用了"listData "（末尾带空格），这会导致后续读取该数据时找不到对应条目。
• 初始化逻辑优先级错误：代码里先默认赋值再尝试读取localStorage，顺序搞反了，应该优先从本地存储加载数据，没有的话再用默认值。

下面是修复后的完整代码，我还优化了逻辑结构，让它更清晰：

selectedColumns: any[] = [];
this.listData = [
  { field: "id", header: "Id", type: "number", value: "id", width: "100px" },
  { field: "description", header: "Description", type: "", value: "description", width: "150px" },
  { field: "status", header: "Status", type: "select", value: "status", width: "100px" },
  { field: "userName", header: 'Moved By', type: "", width: "100px" },
  { field: "lastName", header: 'Moved By', type: "", width: "100px" },
  { field: "rule", header: 'rule', type: "", width: "100px" },
  { field: "domain", header: 'domain', type: "", width: "100px" },
  { field: "date", header: 'date', type: "", width: "100px" },
  { field: "time", header: 'time', type: "", width: "100px" },
  { field: "address", header: 'Moved By', type: "", width: "100px" }
];

// 优先从 localStorage 加载已选中的列
const savedColumns = localStorage.getItem("column_selections");
if (savedColumns) {
  this.selectedColumns = JSON.parse(savedColumns);
} else {
  // 没有保存数据时，设置默认选中前8列
  this.selectedColumns = this.listData.slice(0, 8);
  localStorage.setItem("column_selections", JSON.stringify(this.selectedColumns));
}

// 可选：确保 listData 也存储到 localStorage（如果需要的话）
const savedListData = localStorage.getItem("listData");
if (!savedListData || JSON.parse(savedListData).length === 0) {
  localStorage.setItem("listData", JSON.stringify(this.listData));
}

关键优化点说明： #

1. 调整初始化顺序：先尝试读取localStorage的数据，只有当不存在时才设置默认值并保存，确保刷新后优先加载用户之前的选择。
2. 统一键名：所有localStorage操作都使用无空格、拼写一致的键名（"column_selections"和"listData"）。
3. 简化默认值赋值：用slice(0,8)替代循环，代码更简洁易读。
4. 添加用户选择更新逻辑（你需要在选中列变化时调用）：
   比如当用户修改选中列后，执行下面的代码保存到localStorage：

   // 当选中列发生变化时调用此方法
   saveSelectedColumns() {
     localStorage.setItem("column_selections", JSON.stringify(this.selectedColumns));
   }
   

这样修改后，刷新页面时就会自动加载之前保存在localStorage里的选中列数据了。

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