如何从本地存储中获取数据并设置状态反应答案

【问题标题】：how to get data from localstorage and set state react如何从本地存储中获取数据并设置状态反应
【发布时间】：2021-01-12 16:29:00
【问题描述】：

我有一个本地存储，它有一个键“cartProduct”和一个包含对象数组的值

[
{"id":"001",
"productName":"Tesla",
"categories":"car",
"price":1000000,
"quantity": 1
},
{
"id":"002",
"productName":"Honda",
"categories":"motorcycle",
"price":10000,
"quantity": 2
}
]

我尝试制作函数从本地存储中获取数据，设置状态并以输入形式显示，但数据仍然没有出现。

function Data() (
  const carts = JSON.parse(localStorage.getItem("cartProduct"));
  const [name, setName] = localStorage.setItem('myData', carts);
    <div>
      <input
        type="text"
        placeholder=" product" 
        value={name} //value from productname with id: 001
        onChange={el => setName(el.target.value)}
      />
      <input
        type="text"
        placeholder="product"
        value={name} //value from productname with id: 002
        onChange={el => setName(el.target.value)}
      />
    </div>
  );
}

但显示错误“localStorage.setItem(...) 未定义” 如何解决？

【问题讨论】：

localStorage.setItem() 没有返回值：developer.mozilla.org/en-US/docs/Web/API/Storage/setItem 所以不完全确定您在解构数组分配中期望这些 const 值是什么

标签： javascript reactjs local-storage

【解决方案1】：

localStorage 不能存储对象，如果你真的这样做，对象会这样存储。

"[object Object],[object Object]"

因此您需要在保存对象之前将其转换为 JSON 字符串。

let data = [
      {
        "id": "001",
        "productName": "Tesla",
        "categories": "car",
        "price": 1000000,
        "quantity": 1
      },
      {
        "id": "002",
        "productName": "Honda",
        "categories": "motorcycle",
        "price": 10000,
        "quantity": 2
      }
    ]

let jsonString = JSON.stringify(data)
localStorage.setItem('cartProduct', jsonString)

当您要检索它时，您可以像这样再次将其解析回 JavaScript 对象

const carts = JSON.parse(localStorage.getItem("cartProduct"));

但对于您的主要关注点，请尝试使用此代码：

import React, { useState } from 'react';
const carts = JSON.parse(localStorage.getItem('cartProduct'));

function Data() {
  const [name, setName] = useState(carts);
  function handleChange(e) {
    const {value} = e.target
    setName(()=> value)
  }
  return (
    <div>
      <input
        type="text"
        placeholder=" product"
        value={name} //value from productname with id: 001
        onChange={handleChange}
      />
      <input
        type="text"
        placeholder="product"
        value={name} //value from productname with id: 002
        onChange={handleChange}
      />
    </div>
  );
}

【讨论】：

你的代码的结果是[object object]。然后我尝试添加 `` value={name[0].productName} //Tesla value={name[1].productName} //Honda ``` 下一个问题是如何通过映射而不是硬代码获取值一个一个地获取索引？以及如何将更改后的值保存到本地存储
尝试在控制台中检索 localStorage 并检查是否存储正确。因为问题是您是否以 JSON 字符串格式将数据存储在 localStorage 中？在浏览器控制台中键入 localStorage.getItem('cartProduct') 以查看它是否不是“[object Object],[object Object]”。如果是，则需要将其以 JSON 字符串格式再次存储到 localStorage。

【解决方案2】：

const [cards, setCards] = useState(JSON.parse((localStorage.getItem('carts'))));

它会起作用的！

【讨论】：

【解决方案3】：

您正在尝试将对象保存到本地存储中。您必须先将其转换为字符串。像下面这样

const [name, setName] = localStorage.setItem('myData', JSON.stringify(carts));

【讨论】：