如何修改元素宽度并将新宽度保存至LocalStorage？

嘿，作为JavaScript初学者能做到这一步已经很棒了！咱们来完善你的代码，实现切换元素宽度+把状态保存到LocalStorage的功能，这样下次打开页面时，之前设置的宽度状态还能保留~

核心思路 #

LocalStorage只能存储字符串类型的数据，所以我们可以把「是否启用固定宽度」这个状态（布尔值）转成字符串存起来。页面加载时，先读取LocalStorage里的状态，再把这个状态应用到元素和复选框上；当用户切换复选框时，同步更新LocalStorage的状态。

修改后的完整代码 #

HTML（无需改动，保持你的原代码即可）

<div class="chkb">
  <div class="warpper">
    <div class="head">
      <div class="">Change Width</div>
      <input type="checkbox" id="fxd" class="check" name="theme" >
    </div>
    <div id="box" class="box"></div>
  </div>
</div>

CSS（修正了transition里的拼写错误，其他保持原代码）

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #16202c;
}
.warpper {
  width: 500px;
  text-align: center;
}
.box {
  display: block;
  width: 100%;
  height: 250px;
  background-color: #223444;
  margin: 0 auto;
  transition: .6s ease; /* 修正easier为ease */
}
.fixed {
  max-width: 350px;
  transition: .6s ease; /* 同样修正拼写 */
}
.chkb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.check {
  position: relative;
  width: 40px;
  height: 15px;
  background-color: #223444;
  outline: none;
  -webkit-appearance: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .9);
}
.check:checked {
  background-color: #1e69de;
}
.check:before {
  background-color: #0F121E;
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  left: 0;
  top: 0;
  transform: scale(1.4);
  transition: .3s;
  box-shadow: 0 0 5px rgba(0, 0, 0, .6);
}
.check:checked:before {
  left: 22px;
  background-color: #1e69de;
}
.head {
  border: 1px solid #223444;
  padding: 10px 7px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #1e69de;
}

JavaScript（关键修改部分）

const cek = document.getElementById("fxd"), 
      bbx = document.getElementById("box");

// 页面加载时，读取LocalStorage里保存的状态
const savedWidthState = localStorage.getItem('isFixedWidth');
if (savedWidthState === 'true') {
  cek.checked = true;
  bbx.classList.add('fixed');
}

// 监听复选框变化事件
cek.addEventListener("change", () => {
  // 切换元素的类
  bbx.classList.toggle("fixed");
  // 把当前状态存到LocalStorage（注意要转成字符串）
  localStorage.setItem('isFixedWidth', cek.checked.toString());
});

关键代码解释 #

1. 页面初始化读取状态：

   • localStorage.getItem('isFixedWidth') 从LocalStorage中获取之前保存的状态，第一次打开页面时会返回null。
   • 如果获取到的值是'true'（因为LocalStorage存的是字符串），就把复选框设为选中，并给元素加上fixed类，恢复之前的宽度状态。

2. 切换时保存状态：

   • 每次切换复选框，除了切换元素的类，还要用localStorage.setItem把当前的复选框状态转成字符串存起来，键名isFixedWidth可以自定义，只要前后一致就行。

拓展：如果要存储具体宽度数值 #

如果你不想用类切换，而是想让用户自定义任意宽度并保存，也可以这么做：

// 假设你有一个输入框让用户输入宽度
const widthInput = document.getElementById('width-input');
const box = document.getElementById('box');

// 页面加载时读取保存的宽度
const savedWidth = localStorage.getItem('boxWidth');
if (savedWidth) {
  box.style.width = savedWidth;
  widthInput.value = savedWidth;
}

// 输入框变化时保存宽度
widthInput.addEventListener('input', () => {
  const newWidth = widthInput.value;
  box.style.width = newWidth;
  localStorage.setItem('boxWidth', newWidth);
});

这样就能存储具体的宽度值（比如'300px'、'50%'）啦~

内容的提问来源于stack exchange，提问作者Looup