Elementor Pro按钮7次点击限制跨设备全局生效解决方案问询

你当前的方案依赖localStorage实现计数，它属于浏览器本地存储，仅保存在用户当前设备的当前浏览器中，跨设备、换浏览器、清理缓存都会导致计数丢失，自然无法满足跨设备登录累计的需求。要实现需求必须把计数存储到站点服务端，和登录用户的账号绑定，以下是适配Elementor Pro+WordPress环境的实现步骤：

步骤1：添加后端接口读写用户计数 #

在WordPress中我们可以直接利用用户元数据存储点击次数，通过REST API对外提供读写能力。你可以把下面的PHP代码添加到当前主题的functions.php文件中，也可以使用Code Snippets插件添加自定义代码（更推荐，避免写错代码导致站点崩溃）：

// 注册自定义REST接口
add_action('rest_api_init', function () {
    // 接口：获取当前登录用户的点击次数
    register_rest_route('custom/v1', '/get-mast-click-count', [
        'methods' => 'GET',
        'callback' => 'custom_get_mast_click_count',
        'permission_callback' => function () {
            // 仅登录用户可访问，未登录用户会返回403
            return is_user_logged_in();
        }
    ]);
    // 接口：更新当前登录用户的点击次数
    register_rest_route('custom/v1', '/update-mast-click-count', [
        'methods' => 'POST',
        'callback' => 'custom_update_mast_click_count',
        'permission_callback' => function () {
            return is_user_logged_in();
        }
    ]);
});

// 读取点击次数的回调逻辑
function custom_get_mast_click_count() {
    $user_id = get_current_user_id();
    $click_count = get_user_meta($user_id, 'mast_pack_click_total', true);
    return rest_ensure_response([
        'count' => $click_count ? intval($click_count) : 0
    ]);
}

// 更新点击次数的回调逻辑
function custom_update_mast_click_count() {
    $user_id = get_current_user_id();
    $current_count = get_user_meta($user_id, 'mast_pack_click_total', true);
    $new_count = $current_count ? intval($current_count) + 1 : 1;
    update_user_meta($user_id, 'mast_pack_click_total', $new_count);
    return rest_ensure_response([
        'count' => $new_count,
        'reach_limit' => $new_count >= 7
    ]);
}

步骤2：生成REST API校验用的nonce #

WordPress REST API需要安全校验，你可以在当前页面添加一个短代码模块，输出隐藏的nonce值：
首先在Code Snippets里添加以下短代码：

add_shortcode('wp_rest_nonce', function() {
    return '<input type="hidden" id="wp_rest_nonce_val" value="'.wp_create_nonce('wp_rest').'">';
});

之后在Elementor编辑页面时，添加一个短代码模块，输入[wp_rest_nonce]即可，这个模块不会在前端显示，仅用来存储校验值。

步骤3：替换原有的前端JS代码 #

把你原来的JS代码替换成下面的内容，保留了localStorage做本地缓存优化加载速度，同时所有计数以后端返回的结果为准：

window.addEventListener("load", async () => {
    // 优先读取本地缓存快速渲染
    let localCount = Number(localStorage.getItem("localStorage.clickcount3") || 0);
    refreshCountUI(localCount);

    // 请求后端同步最新计数，覆盖本地数据
    try {
        const res = await fetch('/wp-json/custom/v1/get-mast-click-count', {
            credentials: 'same-origin'
        });
        const resData = await res.json();
        const serverCount = resData.count;
        if (serverCount !== localCount) {
            localStorage.setItem("localStorage.clickcount3", serverCount);
            refreshCountUI(serverCount);
        }
    } catch (err) {
        console.error('同步计数失败', err);
    }
});

// 抽离UI更新逻辑复用
function refreshCountUI(count) {
    document.getElementById("resultMastPack").innerHTML = count + " Click(s).";
    if (count >= 7) {
        document.getElementById("showResultMasPack").style.visibility = "visible";
        // 直接禁用按钮，避免重复点击
        const clickBtn = document.querySelector('button[onclick="CounterMastPack()"]');
        if (clickBtn) clickBtn.disabled = true;
    }
}

async function CounterMastPack() {
    const localCount = Number(localStorage.getItem("localStorage.clickcount3") || 0);
    // 已经达到上限直接拦截
    if (localCount >= 7) return;

    if (typeof(Storage) == "undefined") {
        document.getElementById("resultMastPack").innerHTML = "Sorry, your browser does not support web storage...";
        return;
    }

    // 请求后端更新计数
    try {
        const res = await fetch('/wp-json/custom/v1/update-mast-click-count', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': document.getElementById('wp_rest_nonce_val').value
            }
        });
        const resData = await res.json();
        localStorage.setItem("localStorage.clickcount3", resData.count);
        refreshCountUI(resData.count);
    } catch (err) {
        console.error('更新计数失败', err);
    }
}

注意事项 #

• 该方案默认依赖WordPress自带的用户系统，用户必须登录账号才能实现跨设备计数同步，如果需要支持未登录用户跨设备统计，需要额外绑定手机号、邮箱等唯一身份标识，逻辑会更复杂
• 就算用户清理本地浏览器缓存，下次登录后会自动从服务端拉取最新的计数，不会出现重置的问题
• 代码中额外添加了按钮禁用逻辑，避免用户达到点击上限后还能触发点击事件

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