js点击更换背景图并保存到cookie 防止刷新

你可以使用以下代码实现点击更换背景图并保存到cookie，以防止刷新时重置背景图：

// 获取背景图元素
const bgElement = document.getElementById('background');

// 获取保存在cookie中的背景图地址
const bgUrl = getCookie('bgUrl');

// 如果cookie中有保存的背景图地址，则设置为背景图
if (bgUrl) {
  bgElement.style.backgroundImage = `url(${bgUrl})`;
}

// 给背景图元素绑定点击事件
bgElement.addEventListener('click', function() {
  // 弹出文件选择框选择新的背景图
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.onchange = function() {
    const file = input.files[0];
    if (file) {
      // 将新的背景图设置为背景图
      const reader = new FileReader();
      reader.onload = function() {
        bgElement.style.backgroundImage = `url(${reader.result})`;
        // 将新的背景图地址保存到cookie中
        setCookie('bgUrl', reader.result, 30);
      };
      reader.readAsDataURL(file);
    }
  };
  input.click();
});

// 获取cookie
function getCookie(name) {
  const cookieArr = document.cookie.split(';');
  for (let i = 0; i < cookieArr.length; i++) {
    const cookie = cookieArr[i].trim();
    if (cookie.startsWith(name + '=')) {
      return cookie.substring(name.length + 1);
    }
  }
  return null;
}

// 设置cookie
function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = 'expires=' + date.toUTCString();
  document.cookie = name + '=' + value + ';' + expires + ';path=/';
}

在上面的代码中，我们首先获取背景图元素和保存在cookie中的背景图地址。如果cookie中有保存的背景图地址，则设置为背景图。然后给背景图元素绑定点击事件，弹出文件选择框选择新的背景图，将新的背景图设置为背景图，并将新的背景图地址保存到cookie中。最后，我们还定义了两个函数getCookie和setCookie来获取和设置cookie。