jQuery 与 localStorage：实现点击元素状态跨页面持久化-js教程-PHP中文网

jQuery 与 localStorage：实现点击元素状态跨页面持久化

本教程详细讲解如何使用 jQuery 和 localStorage 实现网页中特定元素的点击状态持久化。通过识别元素的唯一标识符（如 data-product-sku 或 data-post 属性），我们将学习如何在用户点击后将这些标识符存储到 localStorage 中，并在页面重新加载时恢复其对应的 CSS 类，从而确保用户体验的一致性。文章提供了两种场景下的代码示例及注意事项。

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 代码：

造点AI

夸克 · 造点AI

325

查看详情

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，核心思想都是一致的：在点击时更新存储，在页面加载时恢复状态。遵循本文提供的代码示例和注意事项，您将能够构建出更加健壮和用户友好的前端应用。

以上就是jQuery 与 localStorage：实现点击元素状态跨页面持久化的详细内容，更多请关注php中文网其它相关文章！