javascript 如何使用从localStorage检索到的项更新html元素？

c3frrgcw 于 2022-10-30 发布在 Java

关注(0)|答案(2)|浏览(158)

我有一个代码与html跨度有一个内容为0.00，我想更新这个跨度与一个项目从localStorage这样我就不会失去数据时，重新加载页面，我可以拯救的项目，但它消失时，我在页面上f5有人知道如何解决这个问题吗？
我html代码：
我有一个按钮，单击该按钮时，应使用保存在localStorage中的项目更新span

<!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>

我可以从localStorage中恢复该项目，但当我重新加载页面时，该项目丢失了。
我的JavaScript代码：

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

let valueCartNumber = 1

let getNumber = JSON.parse(localStorage.getItem('number'))

let updateLocalStorage = ()=>{
    localStorage.setItem('number', JSON.stringify(valueCartNumber))
}

addProducts.addEventListener('click', ()=>{
    cartValue.innerHTML = getNumber;
})
updateLocalStorage()

JavaScript

来源：https://stackoverflow.com/questions/74248270/how-do-i-update-an-html-element-with-an-item-retrieved-from-localstorage

2条答案

按热度按时间

hc8w905p1#

您可以在刷新页面时添加一个事件，以检查localStorage中是否存在某些内容。

if (localStorage.getItem(....)) {// update your variables here}

赞(0）回复(0）举报 2022-10-30

wkyowqbh2#

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

let valueCartNumber = 1
let getNumber;

if(localStorage.getItem('number')) {
  getNumber = JSON.parse(localStorage.getItem('number'));
  cartValue.innerHTML = getNumber;
}

const updateLocalStorage = ()=>{
    localStorage.setItem('number', JSON.stringify(valueCartNumber))
}

addProducts.addEventListener('click', ()=>{
    cartValue.innerHTML = getNumber;
    updateLocalStorage()
})

updateLocalStorage()

赞(0）回复(0）举报 2022-10-30

我来回答

javascript 如何使用从localStorage检索到的项更新html元素？

2条答案

相关问题

热门标签

最新问答