jQuery 数据存储

存储数据

// 存储单个值
$('#element').data('username', 'john_doe');

// 存储多个值（对象形式）
$('#element').data({
    id: 123,
    name: 'John Doe',
    email: 'john@example.com',
    settings: {
        theme: 'dark',
        notifications: true
    }
});

// 存储复杂数据类型
$('#element').data('callback', function() {
    console.log('这是一个函数');
});

// 存储数组
$('#element').data('items', [1, 2, 3, 4, 5]);

// 存储DOM元素
$('#element').data('relatedElement', document.getElementById('other'));

读取数据

// 读取单个值
var username = $('#element').data('username');
console.log(username); // 'john_doe'

// 读取对象属性（自动展开）
var id = $('#element').data('id');
var name = $('#element').data('name');
var email = $('#element').data('email');

// 读取嵌套对象
var theme = $('#element').data('settings').theme;

// 读取函数并执行
var callback = $('#element').data('callback');
if (typeof callback === 'function') {
    callback(); // 输出: '这是一个函数'
}

// 获取所有数据
var allData = $('#element').data();
console.log(allData); // {username: 'john_doe', id: 123, ...}

移除数据

// 移除单个数据项
$('#element').removeData('username');

// 移除多个数据项
$('#element').removeData('id name email');

// 移除所有数据
$('#element').removeData();

// 链式操作
$('#element')
    .removeData('username')
    .addClass('updated')
    .fadeOut();

// 检查数据是否存在后再移除
if ($('#element').data('username') !== undefined) {
    $('#element').removeData('username');
}

// 批量移除（遍历）
$('.items').each(function() {
    $(this).removeData();
});

场景1：购物车商品

// 为每个商品存储详细信息
$('.product-item').each(function() {
    var $product = $(this);
    var id = $product.data('id');
    var name = $product.data('name');
    var price = $product.data('price');

    $product.on('click', function() {
        // 添加到购物车
        addToCart({
            id: id,
            name: name,
            price: price,
            quantity: 1
        });

        // 标记为已添加
        $product.data('inCart', true)
                .addClass('in-cart');
    });

    // 检查是否已在购物车中
    if ($product.data('inCart')) {
        $product.addClass('in-cart');
    }
});

// 更新商品数量
function updateQuantity($product, newQuantity) {
    $product.data('quantity', newQuantity);
    $product.find('.quantity').text(newQuantity);
}

场景2：聊天应用

// 为每个消息存储元数据
function addMessage(message) {
    var $message = $('<div class="message">')
        .text(message.text)
        .data({
            id: message.id,
            timestamp: message.timestamp,
            sender: message.sender,
            status: 'sent',
            readBy: []
        })
        .appendTo('#chat-container');

    // 为消息添加交互
    $message.on('click', function() {
        var $msg = $(this);
        var status = $msg.data('status');
        var id = $msg.data('id');

        if (status === 'sent') {
            $msg.data('status', 'read')
                .addClass('read');

            // 通知服务器消息已读
            markAsRead(id);
        }
    });

    // 右键菜单
    $message.on('contextmenu', function(e) {
        e.preventDefault();
        showMessageMenu($(this).data());
    });
}

// 批量更新消息状态
function markAllAsRead() {
    $('.message').each(function() {
        var $msg = $(this);
        if ($msg.data('status') === 'sent') {
            $msg.data('status', 'read')
                .addClass('read');
        }
    });
}

场景3：UI组件状态

// 为UI组件存储状态
$.fn.accordion = function(options) {
    return this.each(function() {
        var $accordion = $(this);
        var $headers = $accordion.find('.accordion-header');
        var $contents = $accordion.find('.accordion-content');

        // 初始化数据
        $accordion.data('accordion', {
            options: $.extend({}, options),
            activeIndex: -1,
            speed: 300
        });

        $headers.each(function(index) {
            var $header = $(this);
            var $content = $contents.eq(index);

            // 存储关联关系
            $header.data({
                accordion: $accordion,
                content: $content,
                index: index
            });

            $header.on('click', function() {
                var $hdr = $(this);
                var $content = $hdr.data('content');
                var $acc = $hdr.data('accordion');
                var accData = $acc.data('accordion');
                var index = $hdr.data('index');

                // 切换展开/折叠
                if (accData.activeIndex === index) {
                    $content.slideUp(accData.speed);
                    accData.activeIndex = -1;
                } else {
                    // 关闭其他
                    if (accData.activeIndex !== -1) {
                        $contents.eq(accData.activeIndex)
                                .slideUp(accData.speed);
                    }

                    $content.slideDown(accData.speed);
                    accData.activeIndex = index;
                }

                // 更新数据
                $acc.data('accordion', accData);
            });
        });
    });
};

Q: .data()和.attr('data-*')有什么区别？

A: .data()存储在内存中，支持复杂数据类型，不修改DOM。.attr('data-*')修改DOM属性，只支持字符串。

Q: 数据会一直存在吗？

A: 数据会一直存在直到：1) 调用removeData()；2) 元素被从DOM中移除；3) 页面刷新。

Q: 如何避免内存泄漏？

A: 1) 及时清理不再需要的数据；2) 避免循环引用；3) 在元素移除前调用removeData()；4) 使用弱引用存储大对象。