利用JavaScript持久化保存拖拽元素的新顺序
为了在拖拽操作后保存元素的新顺序，需要以下步骤：
-
获取更新后的元素排序。 使用
getElementsByTagName()或更具选择性的方法（如querySelectorAll）获取所有可拖拽元素，并根据其新的DOM顺序构建一个数组。 数组中的每个元素应包含唯一标识符，例如其ID或数据属性，以便在重新加载页面时正确恢复顺序。 -
将元素顺序序列化为JSON字符串。 使用
JSON.stringify()方法将步骤1中创建的数组转换为JSON字符串，以便于存储和检索。 -
将JSON字符串存储到本地存储。 使用
localStorage.setItem()方法将JSON字符串保存到浏览器的本地存储中。
示例代码：
<code class="javascript">function saveDraggableOrder() {
const draggables = document.querySelectorAll('.draggable'); // 使用更具选择性的选择器
const order = Array.from(draggables).map(item => item.id); // 获取每个元素的ID
localStorage.setItem('draggableOrder', JSON.stringify(order));
}</code>
这段代码假设可拖拽元素都具有唯一的draggable类名和ID属性。 Array.from将NodeList转换为数组，map方法提取每个元素的ID。
现在，拖拽后的顺序已保存在本地存储中。 页面重新加载时，可以从localStorage读取JSON字符串，并使用JSON.parse()解析它来恢复元素的顺序。 请注意，这需要配合相应的代码来根据恢复的顺序重新排列DOM元素。
