时间戳

首页 > 解决方案 > Save multiple results in the localstorage

javascript - Save multiple results in the localstorage

问题描述

I need to save one simulations datas (or more) in localstorage

notary props = datas

Input data example (1 simulation) : 

[{"price":"150000","postalCode":"33000","date":"16/12/2019","type":"immobilier"}]

Input multiples datas example (2 or more simulations) :

[{"price":"150000","postalCode":"33000","date":"16/12/2019","type":"immobilier"}, {"price":"250000","postalCode":"75001","date":"16/12/2019","type":"area"}]

if the user does a single simulation i want to save in my localstorage the first example (array of one object)

But if the user does several simulations I want to save second example (array of multiples objects)

To do this you must save a history (the previous values)

  componentDidUpdate() {
    const { notary } = this.props // datas
    const { send } = this.state
    const prevResult = localStorage.getItem('notary') // check prev results 
    let arrayResult = [] // array
    if (prevResult !== null) arrayResult = JSON.parse(prevResult)
    if (notary !== null && send) {
      arrayResult.push({ date: moment().format('YYYY-MM-DD HH:mm:ss'), ...notary })
      localStorage.setItem('notary', JSON.stringify(arrayResult))
      this.setState({ send: false })
    }
  }

I tried to retrieve the previous values from localstorage and push new values in a table but it does not work.

In my case an array of several objects is well created but the objects are identical while the results are different

OUTPUT : Here is what I would like to have in localStorage

If the user make only 1 simulation : Array of one object

[{"price":"150000","postalCode":"33000","date":"16/12/2019","type":"immobilier"}]

If the user makes multiples simulations : Array of multiples objects

[{"price":"150000","postalCode":"33000","date":"16/12/2019","type":"immobilier"}, {"price":"250000","postalCode":"75001","date":"16/12/2019","type":"area"}]

Thanks for your help

标签： javascriptreactjslocal-storage

解决方案

在您的 utils 文件夹中创建一个 localStorager.js，然后将您的参数发送到该 localStorager 函数。

localStorager.js

export const localStorager= state => {
   localStorage.clear();
if (state.length > 1) {
   //this condition is for multiSimulation
  state.forEach((e, i) => {
    const serializedState = JSON.stringify(e);
    localStorage.setItem(`state${i}`, serializedState);
  });
} else {
  // this else is for singleSimulation
  const serializedState = JSON.stringify(state);
  localStorage.setItem(`state`, serializedState);
}
};

然后在您想要处理 localStorage 的组件中将数据传递给您之前创建的 localStorager.js 函数。

您从 componentDidUpdate 使用的组件

import { localStorager} from "../utils/localStorager";

...
//by the way you can use from localStorager in every function that you want.
componentDidUpdate(){
//forExsample
  let singleSimulation= [
      {
        price: "150000",
        postalCode: "33000",
        date: "16/12/2019",
        type: "immobilier"
      }
    ];
      let multiSimulation= [
      {
        price: "150000",
        postalCode: "33000",
        date: "16/12/2019",
        type: "immobilier"
      },
      { price: "250000", postalCode: "75001", date: "16/12/2019", type: "area" }
    ]
  }

 //and after that use from localStorager and pass these data to that
 localStorager(singleSimulation);
 localStorager(multiSimulation);

 //in this case you should use just pass your notary data  
 const { notary } = this.props // datas
 localStorager(notary)

  //this is end of componentDidUpdate 
  }

推荐阅读