Vue路由切换时localStorage记录indexOf始终返回-1问题

嘿，我看你想实现只有当页面ID没在localStorage的visited列表里时，才把它加进去，但写的函数里indexOf()一直返回-1，导致同一个ID被反复存入对吧？先看看你写的代码：

updateProgress (id) { 
  let old = localStorage.getItem('visited').split(',') 
  if (old === null) old = ' ' 
  if (old.indexOf(id) === -1) { 
    let newProgress = [old, id] 
    localStorage.setItem('visited', newProgress.join(',')) 
  } 
}

问题出在哪？ #

我帮你拆解几个关键bug：

1. 空值处理顺序错了：当visited还没被存过的时候，localStorage.getItem('visited')返回的是null，这时候你直接调用split(',')会直接报错！后面的if (old === null)判断根本没机会执行，因为前面的代码已经崩了。
2. 数组操作逻辑混乱：就算visited有值，split(',')得到的是数组，但你把这个数组和id放到新数组里再join，会导致数组嵌套的问题。比如第一次存id1后，第二次存id2时，newProgress是[['id1'], 'id2']，join后虽然看起来是id1,id2，但逻辑上完全不对，而且如果初始值处理错了，会出现空字符串元素，导致indexOf判断失效。
3. 空数组的判断陷阱：如果visited是空字符串，split(',')会得到['']这个数组，这时候indexOf(id)肯定返回-1，不管id是什么都会重复添加。

修正后的代码 #

给你调整成正确的逻辑，一步步来：

function updateProgress(id) {
  // 先处理空ID的情况，避免存无效值
  if (!id) return;

  // 获取存储的字符串，不存在就用空字符串兜底
  let visitedStr = localStorage.getItem('visited') || '';
  // 转成数组：如果是空字符串就用空数组，否则拆分
  let oldVisited = visitedStr ? visitedStr.split(',') : [];

  // 检查ID是否已存在，用includes更直观
  if (!oldVisited.includes(id)) {
    // 直接往数组里加新ID
    oldVisited.push(id);
    // 存回localStorage
    localStorage.setItem('visited', oldVisited.join(','));
  }
}

为什么这样改？ #

• 先处理空ID，避免无效值存入
• 先获取字符串再处理空值，避免null.split()报错
• 把空字符串转成空数组，避免['']这种干扰判断的情况
• 用includes()替代indexOf()，代码更易读，判断逻辑更直接
• 直接往数组push新元素，再join成字符串，逻辑清晰不会出错

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