如何在本地存储中实际存储 onclick 函数，这样它就不会全部刷新回默认值

Question

我想更改以 JOD 为单位的现有产品价格的货币 (1 JOD = 1.41$ ) 我使用Js中的convertToUSD()函数做到了这一点，但是，我无法保存更改，每当我刷新页面时，旧货币的旧价格都会设置回默认价格。

如何保存更改？

HTML：

<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, name -->
                <img src="./assets/images/tutu-skirt1.jpg" alt="">
                <div class="p_text">
                    <!-- shows on hover -->
                    <h2 class="add-to-cart" onclick="addToCart()">Add to cart</h2>
                    <h1>Tutu skirt</h1>
                    <h4></h4>
                    <div class="price_fav_ivon">
                        <!-- add to wishlist -->
                        <span class="material-symbols-outlined favorite_icon">
                            favorite
                        </span>
                        <p id="price">5</p>
                    </div>
                    <!-- colors available -->
                    <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</button>
        <style>
            #btn {
                position: relative;
                cursor: pointer;
                color: red;
            }
        </style>
        <!-- other product -->
        <div class="product_item">
            <div class="product_description">
                <!--  img, name, price -->
                <img src="./assets/images/tutu-skirt2.jpg" alt="">
                <div class="p_text">
                    <!--  shows on hover -->
                    <h2 onclick="addToCart()">Add to cart</h2>
                    <h1>Tutu skirt</h1>
                    <h4></h4>
                    <div class="price_fav_ivon">
                        <!-- add to wishlist -->
                        <span class="material-symbols-outlined favorite_icon">
                            favorite
                        </span>
                        <p id="price">5</p>
                    </div>
                    <!-- colors available -->
                    <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>

Js：

//adding JOD to indicate the current currency
let prices = document.querySelectorAll('#price');
prices.forEach((price) => {
    price.textContent += " JOD";
});
 
let toggleCurrencyBtn = document.getElementById("btn")
 
//to change the currency
btn.addEventListener('click', convertToUSD);
 
function convertToUSD() {
    prices.forEach((price) => {
        let priceText = price.textContent;
        let priceValue = parseFloat(priceText);
        let usdPrice = priceValue * 1.41;
        price.textContent = usdPrice.toFixed(2) + " USD";
 
        //Save the new price in local storage
        localStorage.setItem("prices", usdPrice.toFixed(2) + " USD")
    });
}

我尝试过：

localStorage.setItem("key", "value");

但是我无法理解它，所以它似乎不起作用。这是我的代码：

Answer 1

您可以按照以下步骤操作：

1. 页面加载时从本地存储加载转换后的价格。
2. 使用转换后的值更新价格。
3. 每当执行转换时，将更新后的价格存储回本地存储中。

这是修改后的代码：

// Function to convert prices to USD
function convertToUSD() {
    prices.forEach((price, index) => {
        let priceText = price.textContent;
        let priceValue = parseFloat(priceText);
        let usdPrice = priceValue * 1.41;
        price.textContent = usdPrice.toFixed(2) + " USD";

        // Save the new price in local storage
        localStorage.setItem("price_" + index, usdPrice.toFixed(2) + " USD");
    });
}

// Function to load converted prices from local storage
function loadConvertedPrices() {
    prices.forEach((price, index) => {
        const convertedPrice = localStorage.getItem("price_" + index);
        if (convertedPrice) {
            price.textContent = convertedPrice;
        }
    });
}

// Event listener for the currency toggle button
toggleCurrencyBtn.addEventListener('click', convertToUSD);

// Load converted prices when the page loads
window.addEventListener('load', loadConvertedPrices);