如何操作localStorage增删条目？实现最多2个唯一ID存储逻辑

嘿，我来帮你搞定这个localStorage的需求，分模块拆解讲：先理清楚ID的增删逻辑，再搞定跨页面的表单值同步~

一、封装localStorage的ID管理核心逻辑 #

我们需要几个工具函数，严格满足「最多存2个唯一ID、删除已有ID后可添加新ID」的要求：

1. 获取已存储的ID列表 #

负责从localStorage取数据并转成数组，处理首次无数据的空值情况：

function getStoredIds() {
  const storedData = localStorage.getItem('saved_post_ids');
  // 无数据时返回空数组，避免后续操作报错
  return storedData ? JSON.parse(storedData) : [];
}

2. 添加ID的逻辑 #

做三重校验：ID是否重复、存储数量是否已满，满足条件才执行添加：

function addPostId(postId) {
  let savedIds = getStoredIds();
  
  // 校验：ID是否已存在
  if (savedIds.includes(postId)) {
    alert('这个ID已经被存储啦');
    return false;
  }
  
  // 校验：是否已存满2个ID
  if (savedIds.length >= 2) {
    alert('最多只能存2个ID哦，请先删除一个已有ID再添加');
    return false;
  }
  
  // 满足条件则更新存储
  savedIds.push(postId);
  localStorage.setItem('saved_post_ids', JSON.stringify(savedIds));
  // 同步更新所有页面的表单值
  updateFormInputs();
  return true;
}

3. 删除ID的逻辑 #

根据传入的ID过滤数组，再更新localStorage：

function removePostId(postId) {
  let savedIds = getStoredIds();
  // 过滤掉要删除的ID
  savedIds = savedIds.filter(id => id !== postId);
  localStorage.setItem('saved_post_ids', JSON.stringify(savedIds));
  // 同步更新表单值
  updateFormInputs();
}

二、跨页面同步表单输入值 #

针对你提到的四个页面的指定表单，写一个统一的同步函数，把存储的ID映射到表单输入框：

function updateFormInputs() {
  const savedIds = getStoredIds();
  // 获取目标表单
  const targetForm = document.getElementById('post_form_id');
  if (!targetForm) return; // 当前页面无该表单则直接退出
  
  // 假设表单内的输入框ID为input_post_id_1和input_post_id_2（对应两个存储位）
  // 可根据实际页面的输入框ID调整选择器
  const input1 = targetForm.querySelector('#input_post_id_1');
  const input2 = targetForm.querySelector('#input_post_id_2');
  
  // 给输入框赋值，无对应ID则留空
  if (input1) input1.value = savedIds[0] || '';
  if (input2) input2.value = savedIds[1] || '';
}

三、页面事件绑定与初始化 #

每个页面加载完成后，需要初始化表单值，并绑定按钮的点击事件：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 页面打开时先同步表单值
  updateFormInputs();
  
  // 绑定「添加ID」按钮的点击事件（假设按钮ID为add-post-id-btn）
  const addBtn = document.getElementById('add-post-id-btn');
  if (addBtn) {
    addBtn.addEventListener('click', () => {
      // 替换成你实际获取目标ID的方式，比如从URL参数、页面元素中提取
      const currentPostId = 'your-target-id'; 
      addPostId(currentPostId);
    });
  }
  
  // 绑定「删除ID」按钮的点击事件（假设按钮通过data-post-id属性存储要删除的ID）
  document.querySelectorAll('.delete-post-id-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const postId = btn.getAttribute('data-post-id');
      removePostId(postId);
      // 如果页面有展示存储ID的列表，可在这里同步更新列表DOM
    });
  });
});

最后一步：复用代码 #

把上述所有JS代码放到一个公共JS文件（比如storage-manager.js）中，然后在首页、搜索结果页、单篇文章页、表单结果页这四个页面里都引入这个文件，就能实现跨页面的存储逻辑和表单同步啦~

小提示 #

• localStorage只能存字符串，所以必须用JSON.stringify和JSON.parse处理数组
• 加入了页面无目标表单/按钮的判断，避免控制台报错
• 可根据实际页面结构，调整输入框选择器、按钮ID等参数

内容的提问来源于stack exchange，提问作者rob.m