如何用localStorage数据更新HTML元素并解决刷新后数据丢失问题？

你的代码存在几个关键问题，导致刷新后数据消失：

1. 页面加载时没有主动把localStorage里的数值同步到DOM元素，刷新后DOM还是显示初始的0,00
2. 初始化valueCartNumber时没有读取localStorage的已有值，直接设为1，会覆盖本地存储的内容
3. 点击按钮的逻辑只是赋值初始读取的getNumber，没有实现数值递增和同步到本地存储

修正后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products</title>
</head>
<body>
    <div>Products</div>
    <button><a href="/index.html">Products</a></button>
    <div data-js="value-cart-products">0,00</div>
    <button data-js="add-product">Add to Cart</button>

    <script src="./app.js"></script>
</body>
</html>

JavaScript（核心修正）

const addProducts = document.querySelector('[data-js="add-product"]')
const cartValue = document.querySelector('[data-js="value-cart-products"]')

// 初始化数值：优先取localStorage的内容，没有则设为0
let valueCartNumber = JSON.parse(localStorage.getItem('number')) || 0

// 页面加载时就把本地存储的数值同步到DOM
const updateCartDisplay = () => {
    // 保持和初始格式一致，转成X,00的形式
    cartValue.innerHTML = `${valueCartNumber},00`
}

// 更新localStorage的方法
const updateLocalStorage = () => {
    localStorage.setItem('number', JSON.stringify(valueCartNumber))
}

// 页面加载完成后立即更新显示
updateCartDisplay()

// 点击按钮的逻辑：数值递增 → 更新显示 → 同步到本地存储
addProducts.addEventListener('click', () => {
    valueCartNumber++
    updateCartDisplay()
    updateLocalStorage()
})

关键修正点说明 #

• 初始化数值：用JSON.parse(localStorage.getItem('number')) || 0确保如果本地没有存储值，就用初始的0，避免出现null
• 页面加载同步DOM：调用updateCartDisplay()，让刷新页面时直接显示本地存储的数值
• 点击逻辑优化：先递增数值，再更新页面显示，最后同步到localStorage，保证数据和页面一致
• 格式统一：把数值转成X,00的字符串格式，和初始的0,00保持一致

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