Javascript 使用localStorage一次更改一个div的背景色

我使用localStorage单击按钮后，将div的背景色更改为黄色。如果用户单击另一个按钮，则旧按钮仍具有黄色背景色。只有我再次点击它，它才会变成白色

我想要实现的是，只有被点击的按钮应该有黄色的背景色，但我正在努力使用localStorage使其工作

此功能可在单击时更改颜色：

function selected(item) {

    if(item.style.backgroundColor == 'yellow'){
        // means the item is selected already. So unset it.
        item.style.backgroundColor = 'white';
        localStorage.removeItem(item.id);
    }
    else{
        item.style.backgroundColor = 'yellow';

        console.log(item.id);
        localStorage.setItem(item.id, 'any value');
    }
}

这就是DIV的样子：

<div class="link" id="firstlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div> 

但这或多或少是伪代码，因为我不知道如何做到这一点

---

感谢您的帮助

您需要使用localStorage吗？如果没有，您可以设置一个变量，比如说

buttonThisticCurrentlyYellow

，它存储当前黄色按钮的id。然后，单击新按钮时，将该变量中存储有id的按钮更改为白色，并使新按钮变为黄色，从而相应地更新变量

如果需要使用localStorage，而不是设置多个项，则可以只设置一个项，例如：

window.localStorage.setItem("yellowButton", "your-btn-id")

---

然后，默认情况下，您总是将按钮设置为白色，但id存储在其中的按钮除外。每次单击时，您都会更新“yellowButton”以反映新按钮的id，该id应为黄色，并相应地更新颜色（旧id变为白色，新id变为黄色）

在执行黄色/非黄色单击逻辑之前，您可以先将所有链接变为白色

下面是一个工作示例（使用

fakeLocalStorage

，因为SO不允许本地存储）：

//将本地存储的链接更改为白色
函数allLinksToWhite（）{
让links=document.getElementsByClassName（'link'）；
for（让链接中的链接）{
if（link.id==fakeLocalStorage.getItem（link.id））{
继续；
}
link.style.backgroundColor='白色'；
}
}
所选功能（项目）{
allLinksToWhite（）；
如果（item.style.backgroundColor==“黄色”）{
item.style.backgroundColor='白色'；
fakeLocalStorage.removeItem（项目id）；
}否则{
item.style.backgroundColor='黄色'；
//console.log（item.id）；
setItem（item.id，“任意值”）；
}
}
//“假”本地存储，因为SO阻止本地存储
常量fakeLocalStorage={
_存储：{}，
getItem:（名称）=>fakeLocalStorage.\u存储[名称]，
setItem：（名称、值）=>{
fakeLocalStorage.\u存储[名称]=值；
},
removeItem：（名称）=>{
if（fakeLocalStorage.\u存储[名称]）{
删除fakeLocalStorage._存储[名称]；
}
}
}

.link{
最大宽度：150px；
填充：2px；
保证金：4倍；
边框：2倍固体石灰；
边界半径：15px；
弹性基准：100%；
文本对齐：居中；
光标：指针；
}

Ulm
陶夫基琴

奥伯科钦
克伦
弗里德里希沙芬
韦茨拉尔
Kiel

我得到一个

未捕获的类型错误：links.forEach不是一个函数

。有办法重写吗？@PoliticsStudent我的打字错误，对不起。固定的。将

querySelector

替换为

getElementsByClassName

Hmm，我在

function selected（item）{allLinksToWhite（）之后包含它；

但它似乎不起作用我认为与其在每次单击时循环和修改所有元素的背景，不如只编辑以前存储的元素的背景。

document.getElementById（localStorage.getItem（“id”））.style.backgroundColor='white'

@NithishGandesiri问题是代码没有按name=“id”存储所选元素，因此您无法轻松找到存储的元素。除了@Yakko所说的之外，除了更新

yellowButton

以反映新按钮的id外，您还需要将该元素的背景设置为

白色。否则，即使更新了
id
，前一个元素的背景颜色也不会更新泰德。是的，没错。我想我的答案中暗示了这一点，但不管怎样，让它明确是个好主意。我将编辑答案
function selected(item) {
    if(item.style.backgroundColor == 'yellow'){
        // unset the item that is already selected
        item.style.backgroundColor = 'white';
        localStorage.removeItem(item.id);
    } else if((document.getElementById("firstlink") has backgroundcolour ) || (document.getElementById("secondlink") has backgroundcolour)... ){
       // remove backgroundColor
    } else{
        item.style.backgroundColor = 'yellow';
        console.log(item.id);
        localStorage.setItem(item.id, 'any value');
    }
}

window.localStorage.setItem("yellowButton", "your-btn-id")