如何用localStorage保存货币切换后的商品价格，避免刷新恢复默认

问题根源 #

1. 重复ID违规：HTML里多个价格元素共用id="price"，违反ID唯一性规则，会导致DOM操作逻辑混乱
2. LocalStorage使用错误：每次循环都用同一个key覆盖存储，最终只保留最后一个商品的价格；且存储转换后的价格而非货币类型，既不灵活也无法批量恢复状态
3. 未读取缓存初始化：页面刷新后直接默认显示JOD价格，完全忽略LocalStorage里的保存记录

修正后的代码 #

HTML核心修改

把重复的id="price"改为class="price"，并添加data-base-price属性存储原始JOD价格（避免从文本中解析数值，更可靠）：

<section class="section center products_available" id="products_available">
    <div class="all_products center" id="all_products">
        <!-- first product -->
        <div class="product_item" id="skirt" name="Tutu Skirt">
            <div class="product_description">
                <img src="./assets/images/tutu-skirt1.jpg" alt="">
                <div class="p_text">
                    <h2 class="add-to-cart" onclick="addToCart()">Add to cart</h2>
                    <h1>Tutu skirt</h1>
                    <h4></h4>
                    <div class="price_fav_ivon">
                        <span class="material-symbols-outlined favorite_icon">
                            favorite
                        </span>
                        <!-- 改id为class，添加data属性存原始价格 -->
                        <p class="price" data-base-price="5">5</p>
                    </div>
                    <div class="p_colors_available">
                        <input type="radio" value="#" class="color_available">
                        <input type="radio" value="#" class="color_available">
                        <input type="radio" value="#" class="color_available">
                    </div>
                </div>
            </div>
        </div>
        <button id="btn">Change Currency</button>
        <style>
            #btn {
                position: relative;
                cursor: pointer;
                color: red;
            }
        </style>
        <!-- other product -->
        <div class="product_item">
            <div class="product_description">
                <img src="./assets/images/tutu-skirt2.jpg" alt="">
                <div class="p_text">
                    <h2 onclick="addToCart()">Add to cart</h2>
                    <h1>Tutu skirt</h1>
                    <h4></h4>
                    <div class="price_fav_ivon">
                        <span class="material-symbols-outlined favorite_icon">
                            favorite
                        </span>
                        <!-- 同样修改 -->
                        <p class="price" data-base-price="5">5</p>
                    </div>
                    <div class="p_colors_available">
                        <input type="radio" value="" class="color_available">
                        <input type="radio" value="" class="color_available">
                        <input type="radio" value="" class="color_available">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

JavaScript核心修改

const PRICE_RATE = 1.41; // 1 JOD = 1.41 USD，抽成常量方便后续维护
const prices = document.querySelectorAll('.price');
const toggleBtn = document.getElementById("btn");

// 页面加载时，读取LocalStorage的货币偏好并初始化价格
function initPrices() {
    const savedCurrency = localStorage.getItem('preferredCurrency') || 'JOD';
    updatePrices(savedCurrency);
}

// 根据指定货币类型更新所有商品价格
function updatePrices(currency) {
    prices.forEach(priceEl => {
        const basePrice = parseFloat(priceEl.dataset.basePrice);
        if (currency === 'USD') {
            const usdPrice = (basePrice * PRICE_RATE).toFixed(2);
            priceEl.textContent = `${usdPrice} USD`;
        } else {
            priceEl.textContent = `${basePrice} JOD`;
        }
    });
    // 把当前货币偏好存入LocalStorage
    localStorage.setItem('preferredCurrency', currency);
}

// 切换按钮点击事件：切换货币类型
toggleBtn.addEventListener('click', () => {
    const currentCurrency = localStorage.getItem('preferredCurrency') || 'JOD';
    const newCurrency = currentCurrency === 'JOD' ? 'USD' : 'JOD';
    updatePrices(newCurrency);
});

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initPrices);

关键修改说明 #

1. 用class替代重复id：符合HTML规范，确保能正确选中所有价格元素
2. 存储货币类型而非具体价格：LocalStorage仅存JOD或USD，价格通过原始值实时转换，避免商品价格变动时缓存失效
3. 页面加载读取缓存：通过initPrices函数自动恢复上次选择的货币状态
4. data属性存原始价格：避免从带单位的文本中解析数值，逻辑更稳定可靠

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