如何使用javascript localstorage保存背景颜色

Question

我需要一个函数，可以在单击时更改背景颜色并保存它。如何使用localStorage做到这一点？

我的代码：

const colors = document.querySelectorAll('.color-btn');
colors[0].addEventListener('click', () => {
document.body.style.backgroundColor = 'red'
})

现在，当我重新加载页面时，我如何做到函数不重置(没有jquery(。

Answer 1

你可以试试这个：

const colors = document.querySelectorAll('.color-btn');
colors[0].addEventListener('click', () => {
document.body.style.backgroundColor = 'green'
localStorage.setItem('color', 'green');
});
window.onload = () => {
const color = localStorage.getItem('color');
document.body.style.backgroundColor = color;
}

Answer 2

如下

const colors = document.querySelectorAll('.color-btn');
colors[0].addEventListener('click', () => {
const COLOR = 'red';
document.body.style.backgroundColor = COLOR;
localStorage.setItem('background-color', COLOR);
})