本地正常部署后报错：Uncaught ReferenceError: $data is not defined

问题描述 #

本地运行商品收藏脚本正常，部署到服务器后抛出错误：

Uncaught ReferenceError: $data is not defined

原代码问题分析 #

1. 未声明变量直接赋值：代码中$data、$product_id等变量均未用var/let/const声明。本地环境可能处于宽松模式，未声明变量会自动挂载到全局对象；服务器环境通常启用严格模式，这种写法直接抛出ReferenceError。
2. 拼写错误：$prduct_price应为$product_price，会导致商品价格无法正确获取。
3. 收藏逻辑漏洞：数组中存储的是HTML字符串，但删除时用商品ID匹配，永远无法从数组中移除对应项。
4. 未实现localStorage持久化：原代码完全未用到localStorage，刷新页面后收藏数据会丢失。

修正后的代码 #

// 从localStorage加载收藏数据，无数据则初始化空数组
let wish_list = JSON.parse(localStorage.getItem('wishList')) || [];

$(document).ready(function() {
    // 页面加载时渲染已收藏的商品
    renderWishList();

    $(".wishlist").on("click", function() {
        const productId = $(this).attr("product_id");
        const productName = $(this).attr("product_name");
        const productPrice = $(this).attr("product_price");

        // 检查商品是否已在收藏列表中
        if (!wish_list.includes(productId)) {
            wish_list.push(productId);
            saveWishListToLocalStorage();
            renderWishList();
            showMessage(`商品 ${productName} 已添加`);
            updateWishListCount();
        }
    });

    // 收藏面板展开/收起切换
    $(".wish_list_heading").on("click", function() {
        const $wishList = $("#wish_list");
        if (!$(this).hasClass("up")) {
            $wishList.css({ height: "300px", overflow: "auto" });
            $(this).addClass("up");
        } else {
            $wishList.css({ height: "30px", overflow: "hidden" });
            $(this).removeClass("up");
        }
    });

    // 删除收藏商品
    $("#wish_list_item").on("click", ".w-premove", function() {
        const productId = $(this).attr("wpid");
        wish_list = wish_list.filter(id => id !== productId);
        saveWishListToLocalStorage();
        renderWishList();
        showMessage("商品已移除");
        updateWishListCount();
    });
});

// 渲染收藏列表
function renderWishList() {
    const $wishListContainer = $("#wish_list_item");
    $wishListContainer.empty();

    // 实际项目中可从接口或页面元素获取商品详情，此处为示例逻辑
    wish_list.forEach(productId => {
        const $productBtn = $(`.wishlist[product_id="${productId}"]`);
        const productName = $productBtn.attr("product_name");
        const productPrice = $productBtn.attr("product_price");
        
        const productHtml = `<tr class='wishlist-item' id='list_id_${productId}'>
            <td class='w-pname'>${productName}</td>
            <td class='w-price'>$ ${productPrice}</td>
            <td class='w-premove' wpid='${productId}'>x</td>
        </tr>`;
        $wishListContainer.append(productHtml);
    });
}

// 保存收藏数据到localStorage
function saveWishListToLocalStorage() {
    localStorage.setItem('wishList', JSON.stringify(wish_list));
}

// 显示提示消息
function showMessage(msg) {
    const $msg = $("#msg");
    $msg.html(msg);
    const top = Math.max(0, (($(window).height() - $msg.outerHeight()) / 2) + $(window).scrollTop()) + "px";
    const left = Math.max(0, (($(window).width() - $msg.outerWidth()) / 2) + $(window).scrollLeft()) + "px";
    $msg.css("left", left);
    $msg.animate({ opacity: 0.6, top: top }, 400, function() {
        $(this).css({ 'opacity': 1 });
    }).show();
    setTimeout(function() {
        $msg.animate({ opacity: 0.6, top: "0px" }, 400, function() {
            $(this).hide();
        });
    }, 1000);
}

// 更新收藏商品数量
function updateWishListCount() {
    $("#listitem").html(wish_list.length);
    $("#p_label").html(wish_list.length > 1 ? "件商品" : "件商品"); // 可根据需求调整文案
}

关键修改说明 #

• 所有变量添加const/let声明，避免全局污染和严格模式报错
• 修复$prduct_price拼写错误
• 改为存储商品ID而非HTML字符串，解决删除时的匹配问题
• 加入localStorage读写逻辑，实现收藏数据持久化
• 新增页面加载时的渲染逻辑，刷新页面后收藏数据不会丢失

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