JavaScript 关键词过滤和本地存储：使用 localStorage 存储和管理关键词数据

本示例展示了如何使用 JavaScript 的 localStorage API 存储和管理关键词数据。代码演示了如何过滤关键词数据，并使用 map 操作将数据与预定义的过滤列表进行匹配，从而实现关键词过滤功能。

let KeywordFiltering = [
  { name: '名字', class: 'username', data: [4, 5, 6] },
  { name: '文案', class: 'Copywriting', data: [1, 2, 3] },
  { name: '全选', class: 'selectall', data: [] }
]

let Filtering = [
  { name: '名字', class: 'username', data: [] },
  { name: '文案', class: 'Copywriting', data: [] },
  { name: '标签', class: 'Tag', data: [] },
  { name: '全选', class: 'selectall', data: [] }
]

if (!localStorage.getItem('KeywordData')) {
  localStorage.setItem('KeywordData', JSON.stringify(KeywordFiltering))
} else {
  let storedData = JSON.parse(localStorage.getItem('KeywordData'))
  storedData = storedData.filter(item => item.data.length != 0)
  storedData = Filtering.map(item => {
    let foundItem = storedData.find(subItem => subItem.name == item.name)
    if (foundItem) {
      return foundItem;
    } else {
      return item;
    }
  })
  console.log(storedData);
}

代码解释:

KeywordFiltering 数组: 存储初始关键词数据，包含名称、类别和数据列表。
Filtering 数组: 定义用于过滤的类别列表。
localStorage.getItem('KeywordData'): 检查 localStorage 中是否存在 'KeywordData' 键值。
首次运行: 如果 localStorage 中不存在 'KeywordData'，则将 KeywordFiltering 数组以 JSON 字符串形式存储到 localStorage 中。
读取数据: 如果 localStorage 中存在 'KeywordData'，则从 localStorage 中读取数据，并将其解析为 JavaScript 对象。
过滤数据: 使用 filter 方法过滤 storedData，只保留包含数据的项。
匹配数据: 使用 map 方法遍历 Filtering 数组，并使用 find 方法在 storedData 中查找匹配的项。如果找到匹配项，则使用该匹配项替换当前项，否则保留当前项。
结果: 最终的 storedData 数组将包含经过过滤和匹配后的数据。

示例使用场景:

在用户界面中动态过滤关键词列表。
存储用户自定义的关键词数据。
实现关键词搜索功能。

代码优化:

可以使用 reduce 方法代替 map 和 find 方法，使代码更简洁。
可以使用更具描述性的变量名称。
可以使用 TypeScript 为代码添加类型提示。

扩展:

可以添加功能允许用户添加、删除和编辑关键词数据。
可以使用第三方库来简化 localStorage 操作。
可以将数据存储到数据库，而不是 localStorage。

结论:

通过使用 localStorage API 和 JavaScript 数组方法，可以轻松实现关键词过滤和管理功能，为用户提供更便捷的操作体验。