页面刷新后如何保留点击添加的<s>标签（删除线）状态？

嘿，这个问题太典型了——你之前的代码只是在内存里操作DOM，页面刷新后浏览器就会重置所有DOM状态，所以得把每个span的状态持久化存储起来才行。我给你调整了代码，用localStorage来保存状态，实现刷新后依然保留效果：

完整实现代码 #

<body>
  <div class="container">
    <div>
      <span data-id="span1">click</span>
      <!-- 多个span的话，给每个分配唯一的data-id -->
      <span data-id="span2">another clickable text</span>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(function() {
        // 页面加载时恢复之前的删除线状态
        function restoreStrikeStates() {
          $('span[data-id]').each(function() {
            const spanId = $(this).data('id');
            // localStorage存的是字符串，所以要转成布尔值判断
            const shouldBeStriked = localStorage.getItem(`strike_status_${spanId}`) === 'true';
            
            if (shouldBeStriked && !$(this).closest('s').length) {
              $(this).wrapAll('<s />');
            } else if (!shouldBeStriked && $(this).closest('s').length) {
              // 如果状态是未删除，但DOM里有s标签，就移除它
              const content = $(this).parent('s').html();
              $(content).insertAfter($(this).parent('s'));
              $(this).parent('s').remove();
            }
          });
        }

        // 把单个span的状态保存到localStorage
        function saveStrikeState(spanId, isStriked) {
          localStorage.setItem(`strike_status_${spanId}`, isStriked.toString());
        }

        // 页面初始化时先恢复状态
        restoreStrikeStates();

        // 点击事件逻辑，同步更新DOM和存储状态
        $(document).delegate("span[data-id]", "click", function() {
          const $currentSpan = $(this);
          const spanId = $currentSpan.data('id');
          const isAlreadyStriked = $currentSpan.closest("s").length > 0;

          if (isAlreadyStriked) {
            // 移除删除线
            const parentS = $currentSpan.parent("s");
            $(parentS.html()).insertAfter(parentS);
            parentS.remove();
            saveStrikeState(spanId, false);
          } else {
            // 添加删除线
            $currentSpan.wrapAll("<s />");
            saveStrikeState(spanId, true);
          }
        });
      });
    </script>
  </div>
</body>

关键知识点解释 #

• 唯一标识符：给每个span加上data-id属性，这样我们能精准区分每个元素的状态，不会在多个span时搞混。
• localStorage持久化：用localStorage.setItem存储每个span的状态，键名用strike_status_加上data-id，避免和其他网站的存储内容冲突。localStorage的数据会一直保存在浏览器里，除非用户手动清除或者代码删除。
• 状态恢复逻辑：页面加载时调用restoreStrikeStates，遍历所有带data-id的span，从localStorage读取之前保存的状态，对应修改DOM结构。
• 同步更新：每次点击切换删除线时，都会同步更新localStorage里的状态，确保DOM和存储内容一致。

注意事项 #

• 如果是动态生成的span，生成后要记得给它分配唯一的data-id，并且调用restoreStrikeStates函数来恢复它的状态。
• localStorage只能存储字符串类型，所以保存布尔值时要转成字符串，读取时再转成布尔值判断。

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