JavaScript 中 Set 怎么实现颜色选择历史的不重复记录-js教程-PHP中文网

javascript 的 set 可高效实现颜色选择历史的去重记录，通过 add() 自动避免重复、限制长度时删除最早项、同步 localstorage 并标准化颜色格式（如统一为小写7位十六进制）确保唯一性。

javascript 中 set 怎么实现颜色选择历史的不重复记录

用 JavaScript 的 Set 实现颜色选择历史的不重复记录，核心就是利用它自动去重、只存唯一值的特性。每次选中一个颜色，直接添加进 Set，无需手动判断是否已存在。

创建并初始化颜色历史 Set

在页面加载或组件初始化时，声明一个 Set 实例来保存已选颜色：

推荐用十六进制（如 "#ff6b6b"）、RGB（如 "rgb(255,107,107)"）或英文名（如 "blue"）统一格式，避免因写法不同导致重复存储（比如 "#f66" 和 "#ff6666" 被视为不同值）
可从本地存储恢复历史记录，保持跨会话一致性：

const colorHistory = new Set(JSON.parse(localStorage.getItem('colorHistory') || '[]'));

添加新选中的颜色

用户点击或输入颜色后，调用 add() 方法即可。重复添加同一颜色不会改变 Set 内容：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

例如：colorHistory.add('#3498db'); —— 即使之前已存在，也不会报错或重复
若需限制历史长度（如最多保留 10 个），可先检查大小再处理：

function addColor(color) {
  colorHistory.add(color);
  if (colorHistory.size > 10) {
    const first = colorHistory.values().next().value;
    colorHistory.delete(first);
  }
}

同步更新界面与持久化

每次添加后，建议及时刷新 UI 并保存到 localStorage：

将 Set 转为数组渲染到历史列表：Array.from(colorHistory)
保存时序列化为 JSON：localStorage.setItem('colorHistory', JSON.stringify([...colorHistory]))
注意：Set 本身不能直接 JSON 序列化，必须展开为数组