将本地存储反应为以前选择的按钮

Question

按下每个按钮时都会更改颜色。我希望它们每次重新加载页面时都保持这种颜色，直到运行localStorage.clear((为止。因此，我正在尝试使用本地存储重新应用以前应用的css。我的想法是存储每个按钮的ID，循环ID，然后重新应用css。但它不断抛出错误：；无法读取null的属性(读取"style"("。我似乎遇到的另一个问题是，我在第二页重新加载时丢失了本地存储！如果你有改进的方法或更好的方法，请告诉我！谢谢

更新代码
以下是最有效版本的链接https://codesandbox.io/s/festive-rui-vz7tf?file=/src/App.js我加了一个"；删除历史Btn"；。现在唯一的问题是，在重新加载并选择另一个按钮后，本地存储将被新的选择完全擦除。我需要的是要堆叠的选择，直到用户运行localStorage.clear((.

import React,{useState,useEffect} from 'react';

const App=()=> {
const [btns, setBtns] = useState([]);
useEffect(() => {
localStorage.setItem('BtnsClicked', JSON.stringify({ btns }));
}, [btns]);

const handleAcknowledge=(event)=>{
setBtns([...btns, event.target.id])

event.target.style.backgroundColor = "red"
event.target.innerHTML = "Clicked!"
}
const reSelectBtns=()=>{
const storedBtns = JSON.parse(localStorage.getItem('BtnsClicked'));

if (storedBtns.btns.length){
storedBtns.btns.forEach(btn=>{
console.log(document.getElementById(btn).style.backgroundColor = "red")
})
}
}
reSelectBtns()
return (
<div className="App">

<button id = "1" onClick={handleAcknowledge}>Acknowledge</button> 
<button id = "2" onClick={handleAcknowledge}>Acknowledge</button> 
<button id = "3" onClick={handleAcknowledge}>Acknowledge</button>  
<button id = "4" onClick={handleAcknowledge}>Acknowledge</button>  

</div>
);
}
export default App;

Answer 1

查看我的这个沙箱链接https://codesandbox.io/s/blissful-marco-7wgon?file=/src/App.js

它解决了你的问题。