Javascript 本地存储将字符串存储一次，并且不会更改

我有一个函数，它在卡片中显示搜索列表（最近的搜索）。当我搜索某个项目时，它会成功地存储在本地存储中，但当我搜索另一个项目时，列表（最近的搜索）不会更新。即使在页面刷新后，相同的第一次搜索仍保留在卡片中，并且根本不会更新。有人能看到发生了什么以及如何解决这个问题吗？提前谢谢

Javascript:

function customDeal1() {

  var recentSearch = document.querySelector('#search').value;
  var HighScore = localStorage.getItem('highScore');

var matchArray = findDeals(HighScore, name).slice(0,1);
  const html = matchArray.map(place => {
    const regex = new RegExp(HighScore);
    const nameName = place.name.replace(regex, `<span class="hl">${HighScore}</span>`);
         var shop = place.url.replace(/(centra)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
         var shop1 = place.url.replace(/(tesco)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
         var shop2 = place.url.replace(/(aldi)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
         var shop3 = place.url.replace(/(lidl)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
         var shop4 = place.url.replace(/(supervalu)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
    return `

            <img src="${place.imgurl}" alt="Drink Image">
            <h5>${nameName}</h5>
            <p>${(place.price)} ${shop} ${shop1} ${shop2} ${shop3} ${shop4}</p>

    `;
  }).join('') || '<li> No Searches Found </li>';
  deal2.innerHTML = html; 

if(!localStorage.getItem('highScore') || localStorage.getItem('highScore').length === 0){
  localStorage.setItem('highScore', recentSearch);
}

};
const deal2 = document.querySelector('.deal1');
setInterval(customDeal1,5000);

函数customDeal1（）{
var recentSearch=document.querySelector（“#search”）.value；
var HighScore=localStorage.getItem（'HighScore'）；
var matchArray=findDels（高分，名称）.slice（0,1）；
常量html=matchArray.map（位置=>{
const regex=新RegExp（高分）；
const nameName=place.name.replace（regex，`${HighScore}`）；
var shop=place.url.replace（/（centra）|[^]/g，$1'）。replace（/^\w/，c=>c.toUpperCase（））；
var shop1=place.url.replace（/（乐购）|[^]/g，$1'）。replace（/^\w/，c=>c.toUpperCase（））；
var shop2=place.url.replace（/（aldi）|[^]/g，$1'）。replace（/^\w/，c=>c.toUpperCase（））；
var shop3=place.url.replace（/（lidl）|[^]/g，$1'）。replace（/^\w/，c=>c.toUpperCase（））；
var shop4=place.url.replace（/（supervalu）|[^]/g，$1'）。replace（/^\w/，c=>c.toUpperCase（））；
返回`
${nameName}
${（place.price）}${shop}${shop1}${shop2}${shop3}${shop4}

`;
}).join（“”）| |“
未找到任何搜索
”；
deal2.innerHTML=html；
如果（！localStorage.getItem（'highScore'）| | localStorage.getItem（'highScore'）。长度==0）{
setItem（'highScore'，recentSearch）；
}
};
const deal2=document.querySelector（'.deal1'）；
setInterval（自定义）；

我认为问题出在这方面

if(!localStorage.getItem('highScore') || localStorage.getItem('highScore').length === 0){
  localStorage.setItem('highScore', recentSearch);
}

它一开始可以工作，因为本地存储是空的，但是一旦执行了代码 recentSearch将存储在本地存储中，这意味着将跳过上面的行 要解决此问题，您必须在上面一行之前从本地存储中删除recentSearch，或者只保存数据而不使用if语句，因为本地存储覆盖数据

如何：

        function customDeal1() {

        var recentSearch = document.querySelector('#search').value;
        var HighScore = localStorage.getItem('highScore');
        deal2.innerHTML = recentSearch;

        // delete the conditions : if(!localStorage.getItem('highScore') ...
        localStorage.setItem('highScore', recentSearch);

    };
    const deal2 = document.querySelector('.deal1');
    setInterval(customDeal1, 5000);

---

这是因为只有在未设置或长度为0时才调用

localStorage.setItem（）

。一旦你设置了它，这个语句将总是返回false，因此你不能更新这个值。啊，好的。但是如果没有if语句，它在第二次刷新后将无法生存。请尝试更改

localStorage.getItem（'highScore'）。对于长度>0，长度==0

，或者在if语句

localStorage.clear（）之前添加此行