所以我正在尝试做一个标题图像改变器，比如当你点击一个图像来改变标题的样式，并在重新加载后保存它。例如：我有一个默认的图像使用一个样式在头部，当我按下按钮改变它，自动保存它，即使在刷新。
null
function changetoimg1() {
document.getElementById("header").style.background = "url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)";
}
function changetoimg2() {
document.getElementById("header").style.background = "url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)";
}
function changetoimg3() {
document.getElementById("header").style.background = "url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)";
}.test{
background: url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
}
.test2{
background: url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
}
.test3{
background: url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
}
.imageshdr{
position: absolute;
margin-top: -245px;
display: inline-block;
width: 500px;
margin-left: 191%;
}<header id="header" style="background-image: url('https://i.imgur.com/oKe8JBR.png');">
<div class="imageshdr"><button onclick="changetoimg1()" class="test"></button>
<button onclick="changetoimg2()" class="test2"></button>
<button onclick="changetoimg3()" class="test3"></button></div>null
我认为您不需要重复代码，也没有为#header赋予属性
这个答案是基于我对你问题的理解。
null
window.onload=()=>{
let image=localStorage.getItem("dataImage");
document.getElementById("header").style.backgroundImage=`url('${image}')`;
}
function changetoimg() {
document.getElementById("header").style.backgroundImage = "url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg')";
localStorage.setItem("dataImage","https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg")
}
使用事件侦听器是一个更好的实践。使用sessionStorage在重新加载时保持当前状态；如果您希望在浏览器关闭时保留本地存储，则可以使用本地存储。
null
document.addEventListener("DOMContentLoaded", function(){
// charge the image on load
changeimage(false);
// add the click action on each button
document.querySelectorAll('.imageshdr button').addEventListener('click', function() {
changeimage(true);
});
});
function changeimage(next) {
var i = 0;
// retrieve the current index if stored
if(sessionStorage.getItem('myheader') != null) i = sessionStorage.getItem('myheader');
// go on next if requested
if(next) i+=1;
// max i = 3
i=i%3;
sessionStorage.setItem('myheader',i);
// here change your background from an array of images
}<header id="header">
<div class="imageshdr">
<button class="test"></button>
<button class="test2"></button>
<button class="test3"></button>
</div>