Question

使用localStorage将列表传递到其他.js文件时遇到问题

我试图将信息推送到名为“数据”的列表，并将其存储在本地存储中以使用其他.js文件中的数据

我还介绍了如何在其他.js文件中调用以及如何在类组件中使用它下方，但数据似乎无法正常工作或无法导入其他.js文件中


//Trying to push the info to the list named as 'data' and store it in local storage to use the data in other .js file

renderBoxContent = () => {

  let total = 0;
  let Total = 0;
  let itemList = [];
  let  data = [];

  this.state.availableItems.map((items)=> {

      if(items.purchase > 0){
       Total += items.price*items.purchase;
       total = items.price*items.purchase;
       console.log(items.purchase);
       console.log(total);
        data.push(
          {
            key: items.name,
            name: items.name,
            src: items.image,
            singlePrice: items.price.toFixed(2),
            purchase: items.purchase,
            totalItemPrice: total.toFixed(2),
          }
        )
      }
  })

  //dataexported = data;

  localStorage.setItem("purchase-data",JSON.stringify(data));

  itemList.push(  <Table defaultExpandAllRows={false} locale={{emptyText: 'Empty Cart'}} style={{background: '#ffffff'}} pagination={false} columns={column} dataSource={data} size="small" />)
  itemList.push( <h3 style={{paddingLeft:15,paddingTop:20}}>    Total     {Total.toFixed(2)}</h3>)
  return itemList;
 }




//This is how I call in other .js file and use it in a class component
//But the data seems is not working or imported at thhe other .js file

let purchaseData = JSON.parse(localStorage.getItem("purchase-data"));

export default class Favourites extends Component{

    renderCheckOut = () => {

        purchaseData.map((individual) => {

            return( 

        some codes here.... 
                )

        }


        render(){
            return(
            some codes here....
            )
        }
    }

它应该返回map函数内部的组件

Answer 1

通常可以在整个应用程序中访问LocalStorage。请参阅此演示https://codesandbox.io/s/eloquent-wildflower-50c6b?fontsize=14

在上面的演示中，当您打开/路由时，数据将被设置到localStorage中，随后当您打开/about路由时，将从localStorage中提取相同的数据并显示在HTML中。

如果您的JS文件位于同一应用程序中，则在上面的示例中访问 localStorage 数据应该不是问题。

使用localStorage将列表传递到其他.js文件时遇到问题

1 个答案: