如何利用Local Storage保存多个Div的类名状态？

完全可以通过LocalStorage实现这个需求。当前代码仅保存了主div的单个类名，要实现页面刷新/重新打开后恢复所有div的状态，需要把主div的类名和容器内所有div的类名集合作为整体存储，页面加载时再读取并重建DOM。

具体修改方案： #

1. 新增状态保存函数：统一收集当前所有div的状态，转成JSON字符串存入LocalStorage（LocalStorage仅支持字符串存储）
2. 修改现有操作逻辑：点击颜色按钮或克隆按钮后，调用保存函数更新存储状态
3. 页面加载时恢复状态：读取LocalStorage中的数据，重建主div和容器内的所有元素

修改后的完整代码：

// 页面加载时恢复状态
$(document).ready(function() {
  const savedState = localStorage.getItem('divState');
  if (savedState) {
    const { mainClass, containerClasses } = JSON.parse(savedState);
    // 恢复主div的类名
    $('#main').removeClass().addClass(mainClass);
    // 清空容器并重新创建所有div
    $('.container').empty();
    containerClasses.forEach(className => {
      $('<div>').addClass(className).appendTo('.container');
    });
  }
});

// 保存当前所有div的状态到LocalStorage
function saveCurrentState() {
  const mainClass = $('#main').attr('class');
  // 收集容器内所有div的类名
  const containerClasses = $('.container div').map(function() {
    return $(this).attr('class');
  }).get();
  // 组装状态对象并存入LocalStorage
  const state = { mainClass, containerClasses };
  localStorage.setItem('divState', JSON.stringify(state));
}

$(".btngreen").on("click", function () {
  $("#main").removeClass().addClass("green");
  saveCurrentState();
});

$(".btnorange").on("click", function () {
  $("#main").removeClass().addClass("orange");
  saveCurrentState();
});

$(".btnyellow").on("click", function () {
  $("#main").removeClass().addClass("yellow");
  saveCurrentState();
});

$(".clone").on("click", function () {
  $("#main").clone().removeClass("main").prependTo(".container");
  $(".container div").last().remove();
  saveCurrentState();
});

关键说明： #

• 用JSON.stringify将包含主div类名和容器div类名数组的对象转为字符串，解决LocalStorage只能存储字符串的限制
• 页面初始化时，通过JSON.parse解析存储的字符串，重建对应的DOM元素
• 每次操作（修改颜色、克隆/删除div）后立即调用saveCurrentState，确保存储的状态始终是最新的

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