JavaScript中mouseup鼠标释放事件后调用函数及localStorage不更新问题

问题排查与解决方法 #

1. 先加日志定位执行中断位置 #

你可以先给saveOrder函数加调试日志，确认代码执行到了哪一步，有没有出现运行时报错：

function saveOrder() {
  console.log('saveOrder 函数启动')
  const char = document.querySelectorAll('.text');
  const num = document.querySelectorAll('li');
  // 打印两个数组的长度，确认是否匹配
  console.log('text元素数量：', char.length, 'li元素数量：', num.length)
  const charArray = jQuery.makeArray(char);
  const numArray = jQuery.makeArray(num);

  // 加上变量声明，避免隐式全局变量冲突
  const nameArray = charArray.map(e => e.innerText);
  const idArray = numArray.map(e => e.id)

  let saveIt = nameArray.map((i, idx) => ({
    name: i,
    id: +idArray[idx],
    trash: false
  }));
  // 打印要存储的内容，确认数据格式正常
  console.log('待存储数据：', saveIt)

  localStorage.setItem('TILES', JSON.stringify(saveIt));
  // 打印存储后的读取结果，确认写入是否成功
  console.log('存储后读取结果：', localStorage.getItem('TILES'))
}

加完日志后再触发事件，就能直接定位是代码执行中断，还是数据有问题，还是浏览器存储限制。

2. 常见问题修复 #

• 变量未声明冲突：原代码里的nameArray和idArray没有加let/const声明，属于隐式全局变量，如果全局有同名变量存在读写限制，会直接导致代码中断，补上声明即可。
• 选择器范围错误：直接用document.querySelectorAll('li')会选中页面所有li元素，如果页面有其他li，会导致两个数组长度不匹配，生成的数据异常。建议给拖拽列表的父容器加专属类，比如class="tile-container"，然后把选择器改成：

  const char = document.querySelectorAll('.tile-container .text');
  const num = document.querySelectorAll('.tile-container li');
  

• 拖拽场景事件不匹配：你给li加了draggable="true"属性，拖拽场景下mouseup事件可能被拖拽默认行为拦截，建议同时绑定dragend事件，覆盖拖拽结束的场景：

  <li class="item ui-state-default " draggable="true" id="${id}" onmouseup="mouseUp()" ondragend="mouseUp()">
  

• 重复ID问题：li和内部的span用了相同的id，id在页面中必须唯一，重复id会导致DOM选择结果异常，建议把span的id改成id="del-${id}"这类不重复的命名。

3. 浏览器限制排查 #

如果以上代码都没问题，就排查浏览器层面的限制：

• 手动在控制台执行localStorage.setItem('test', '1')，再执行localStorage.getItem('test')，看能不能正常读写，排除浏览器禁用本地存储的情况。
• 确认没有在隐私/无痕模式下测试，部分浏览器的无痕模式下localStorage不会持久化，关闭页面就会清空。

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