1. 理解需求与挑战
在网页开发中，我们经常需要实现用户交互状态的持久化。例如，当用户点击一个“添加到心愿单”按钮后，我们希望该按钮能立即改变样式（如添加一个 wishlisttest 类），并且在用户刷新页面或导航到其他页面后再返回时，该按钮依然保持已点击的样式。
直接使用 jQuery 的 addClass() 方法虽然可以立即改变元素样式，但这种改变仅限于当前页面会话。一旦页面重新加载，JavaScript 状态会被重置，样式也会恢复到初始状态。为了解决这个问题，我们需要借助客户端存储机制，如 localStorage 或 cookie，来保存元素的状态。
挑战在于，页面上可能存在多个具有相同类名但功能上独立的元素（例如多个商品的心愿单按钮）。因此，仅仅保存一个布尔值（如 btnClicked: true）是不足以区分具体是哪个元素被点击的。我们需要为每个元素找到一个唯一的标识符，并存储一个被点击元素的列表。
2. 核心原理与技术栈
本教程将利用以下技术实现点击状态的持久化：
- jQuery： 用于简化 DOM 操作、事件绑定和数据属性的读取。
- localStorage： 浏览器提供的一种本地存储机制，允许存储键值对数据，数据在浏览器关闭后依然保留，且存储容量相对较大（通常为 5MB+）。
- *HTML `data-属性：** 用于存储自定义数据，是识别特定元素的理想选择，例如data-post或data-product-sku`。
- JSON： 由于 localStorage 只能存储字符串，当我们需要存储一个包含多个唯一标识符的列表时，需要将 JavaScript 数组转换为 JSON 字符串进行存储，并在读取时再解析回来。
基本思路是：
- 点击时： 捕获点击事件，获取被点击元素的唯一标识符，将其添加到 localStorage 中存储的标识符列表中，并更新元素样式。
- 页面加载时： 读取 localStorage 中存储的标识符列表，遍历页面上所有相关元素，如果某个元素的标识符在列表中，则为其添加相应的样式。
3. 实现步骤与代码示例
我们将根据元素唯一标识符的类型，提供两种实现场景。
3.1 场景一：使用复杂 JSON 格式的 data-post 属性
当元素的唯一标识符嵌套在 data-post 属性的 JSON 字符串中时，我们需要额外的解析步骤。
HTML 结构示例：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="action towishlist" data-post='{"action":"https:\/\/www.domain.com\/se\/wishlist\/index\/add\/","data":{"product":3766,"uenc":"aHR0cHM6Ly93d3cucG9zdGVyeS5jb20vanAvcG9zdGVycw,,"}}' data-action="add-to-wishlist" role="button">产品 3766</a>
<a href="#" class="action towishlist" data-post='{"action":"https:\/\/www.domain.com\/se\/wishlist\/index\/add\/","data":{"product":3767,"uenc":"aHR0cHM6Ly93d3cucG9zdGVyeS5jb20vanAvcG9zdGVycw,,"}}' data-action="add-to-wishlist" role="button">产品 3767</a>
<a href="#" class="action towishlist" data-post='{"action":"https:\/\/www.domain.com\/se\/wishlist\/index\/add\/","data":{"product":3768,"uenc":"aHR0cHM6Ly9wYWdlLmpwL3Bvc3RlcnM,,"}}' data-action="add-to-wishlist" role="button">产品 3768</a>
<style>
.wishlisttest {
color: green;
font-weight: bold;
}
</style>JavaScript 代码：
jQuery(document).ready(function() {
// 1. 处理点击事件：保存点击状态并添加样式
jQuery("a.action.towishlist").on('click', function(e) {
e.preventDefault(); // 阻止默认链接行为
jQuery(this).addClass("wishlisttest");
// 从 localStorage 获取已点击按钮的列表，如果不存在则初始化为空数组
var clickedButtons = localStorage.getItem("btnClicked");
if (!clickedButtons) {
clickedButtons = [];
} else {
clickedButtons = JSON.parse(clickedButtons);
}
// 从 data-post 属性中获取产品 ID
var dataPost = jQuery(this).data('post');
if (dataPost) {
// data-post 属性值本身是一个 JSON 字符串，需要再次解析
dataPost = JSON.parse(dataPost);
var productId = dataPost.data.product;
// 如果产品 ID 不在已点击列表中，则添加
if (clickedButtons.indexOf(productId) < 0) {
clickedButtons.push(productId);
}
}
// 将更新后的列表转换回 JSON 字符串并存储到 localStorage
localStorage.setItem('btnClicked', JSON.stringify(clickedButtons));
});
// 2. 页面加载时：恢复之前保存的点击状态
(function() {
// 从 localStorage 获取已点击按钮的列表
var clickedButtons = localStorage.getItem("btnClicked");
if (!clickedButtons) {
clickedButtons = [];
} else {
clickedButtons = JSON.parse(clickedButtons);
}
// 遍历所有心愿单按钮，检查是否在已点击列表中
jQuery("a.action.towishlist").each(function() {
var dataPost = jQuery(this).data('post');
if (dataPost) {
dataPost = JSON.parse(dataPost);
var productId = dataPost.data.product;
// 如果产品 ID 在列表中，则添加样式
if (clickedButtons.indexOf(productId) > -1) {
jQuery(this).addClass("wishlisttest");
}
}
});
})(); // 立即执行函数，确保在 DOM Ready 后立即恢复状态
});注意事项：
- data-post 属性的值是一个 JSON 字符串，所以需要使用 JSON.parse() 两次：一次是 jQuery 的 .data() 方法自动将字符串解析为 JavaScript 对象，另一次是手动解析 data 属性中的字符串。
- HTML 中 data-post 属性的外部引号应与内部 JSON 字符串的引号区分开，例如外部使用单引号 '，内部使用双引号 "。如果外部也使用双引号，则内部的双引号需要进行转义 \"。示例中使用了单引号包裹整个 data-post 值，避免了转义问题。
3.2 场景二：使用简洁的 data-product-sku 属性
如果您的平台提供了一个更简洁、直接的唯一标识符（如 data-product-sku），则可以大大简化代码。
HTML 结构示例：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="action towishlist" data-product-sku="1234" data-action="add-to-wishlist" role="button">产品 SKU 1234</a>
<a href="#" class="action towishlist" data-product-sku="5678" data-action="add-to-wishlist" role="button">产品 SKU 5678</a>
<a href="#" class="action towishlist" data-product-sku="9012" data-action="add-to-wishlist" role="button">产品 SKU 9012</a>
<style>
.wishlisttest {
color: blue;
font-style: italic;
}
</style>JavaScript 代码：
jQuery(document).ready(function() {
// 1. 处理点击事件：保存点击状态并添加样式
jQuery("a.action.towishlist").on('click', function(e) {
e.preventDefault(); // 阻止默认链接行为
jQuery(this).addClass("wishlisttest");
// 从 localStorage 获取已点击按钮的列表，如果不存在则初始化为空数组
var clickedButtons = localStorage.getItem("btnClicked");
if (!clickedButtons) {
clickedButtons = [];
} else {
clickedButtons = JSON.parse(clickedButtons);
}
// 直接从 data-product-sku 属性获取 SKU
var productSku = jQuery(this).data('product-sku');
// 如果 SKU 存在且不在已点击列表中，则添加
if (productSku && clickedButtons.indexOf(productSku) < 0) {
clickedButtons.push(productSku);
}
// 将更新后的列表转换回 JSON 字符串并存储到 localStorage
localStorage.setItem('btnClicked', JSON.stringify(clickedButtons));
});
// 2. 页面加载时：恢复之前保存的点击状态
(function() {
// 从 localStorage 获取已点击按钮的列表
var clickedButtons = localStorage.getItem("btnClicked");
if (!clickedButtons) {
clickedButtons = [];
} else {
clickedButtons = JSON.parse(clickedButtons);
}
// 遍历所有心愿单按钮，检查是否在已点击列表中
jQuery("a.action.towishlist").each(function() {
var productSku = jQuery(this).data('product-sku');
// 如果 SKU 存在且在列表中，则添加样式
if (productSku && clickedButtons.indexOf(productSku) > -1) {
jQuery(this).addClass("wishlisttest");
}
});
})(); // 立即执行函数
});注意事项：
- 这种方法更加简洁，因为 data-product-sku 的值通常是一个简单的字符串或数字，无需额外的 JSON 解析。
- 始终检查 productSku 是否存在，以避免潜在的错误。
4. 注意事项与最佳实践
- localStorage 与 cookie 的选择： localStorage 适用于存储较大量的数据，且数据不会随每次 HTTP 请求发送到服务器，性能更好。cookie 存储容量小（约 4KB），且会随请求发送，更适合存储会话信息或少量用户偏好。对于这种客户端状态持久化，localStorage 是更优选择。
- 数据类型处理： localStorage 只能存储字符串。因此，当存储数组或对象时，必须使用 JSON.stringify() 将其序列化为字符串；读取时，则需使用 JSON.parse() 将其反序列化为原始数据类型。
- 初始化空数组： 在读取 localStorage 数据时，如果键不存在（即第一次加载或数据被清除），localStorage.getItem() 将返回 null。务必检查并将其初始化为空数组 []，以避免后续操作（如 push 或 indexOf）报错。
- 状态清除机制： 考虑何时清除或更新存储的状态。例如，如果用户清空了心愿单，那么 localStorage 中对应的已点击产品列表也应该被清空。这通常需要结合后端逻辑或特定的前端事件来触发 localStorage.removeItem('btnClicked')。
- 性能考量： 对于页面上存在大量需要持久化状态的元素时，jQuery.each() 循环可能会带来轻微的性能开销。在大多数现代应用中，这通常不是问题，但如果元素数量非常庞大，可能需要考虑更优化的 DOM 操作策略。
- 用户体验： 确保添加和移除样式是平滑的，并与应用的整体设计风格保持一致。
5. 总结
通过结合 jQuery 的 DOM 操作能力和 localStorage 的数据持久化特性，我们可以有效地实现网页元素点击状态的跨页面持久化。关键在于为每个元素找到一个唯一的标识符，并将其列表存储为 JSON 格式。无论是面对复杂的 JSON data-post 属性还是简洁的 data-product-sku，核心思想都是一致的：在点击时更新存储，在页面加载时恢复状态。遵循本文提供的代码示例和注意事项，您将能够构建出更加健壮和用户友好的前端应用。
