时间戳

首页 > 解决方案 > 如何在方法单击时更新 sessionStorage 中的值？

javascript - 如何在方法单击时更新 sessionStorage 中的值？

问题描述

在一个 React 项目中，我有 pay() 方法。钱包余额与某些硬币一起显示。当点击 pay() 时，购买数据中的数据会更新。硬币数据存储在 sessionStorage 中，但是刷新页面后数据丢失。

付款方式

const onPayment = async (coins, _id) => { 
  try {
    await fetch(`${config.baseUrl}customers/purchaseproduct?content_id=${_id}&coins=${coins}&v=1.0`, {
      method:'POST', 
      headers: {
        'Content-Type': 'application/json',
        'ApiKey': config.apiKey,
        'Authorization':sessionStorage.getItem('tokenNew'),   
        'platform':'web'
      },
    }).then((data) => data.json()).then((data2) => {
      const balanceUpdated = data2.data.purchase.coins_after_txn
      console.log('new balance', balanceUpdated) //new balance: 49990
           
      {/* Here coins data is updated only on click of pay() method  later on page refresh sessionStorage 
          value is empty */}
      sessionStorage.setItem('walletData', balanceUpdated)
    })
  }
  catch({error}) {
    toast.error(error)
  }

}

如您所见，“硬币”是产品的价格，而“_id”是 onPayment 方法中特定产品的 ID。walletData 仅在付款时更新，刷新页面时数据为空。

举个例子，当点击 pay() 方法时，产品价格为 90 美元，从钱包“balanceUpdated”中删除 90 美元，然后传递到“walletData”中的 sessionStorage，该实例显示为 4900，但当页面刷新时“walletData”是空的。

如何将新的更新值存储在 sessionStorage 中，并且即使在刷新后也会保留？

现在登录文件

const onSubmit = async (data) => { 
    try {
       let newData = await fetch('customers/auth/login', {
        method:'POST',
        headers: {
          'Content-Type': 'application/json',
          'ApiKey': config.apiKey,
          'Platform': 'web',
        },
        body: JSON.stringify(data)  
      });
      newData = await newData.json();

      if(newData.error == true) {
        toast.error(newData.error_messages[0])
      } else {
        const tokenData = newData.data.token
        const walletData = newData.data.coinsxp.coins
  
      sessionStorage.setItem('tokenNew', tokenData);
      sessionStorage.setItem('walletData', walletData); 
      }
    }
    catch({error}) {   
        toast.error(error)      
    }
  }

标签： javascriptreactjs

解决方案

数据可能在 sessionStorage 中，您只需在启动时检索它并将其写入内存。

可能你想要这样的东西（或相反，取决于你想要优先的值）：

    const walletData = newData.data.coinsxp.coins || sessionStorage.getItem('walletData');

将数据放入会话存储中并不等同于使其持久化。将数据放入 sessionStorage 意味着它只会留在会话存储中，并不意味着您的应用数据会根据它自动更新。这就是为什么每次你打电话时setItem，你也应该打电话getItem——否则你只是把东西藏在某个地方，而没有访问它。

推荐阅读