如何從本地存儲獲取數據並設置狀態反應

Question

我有一個 localstorage，它有一個鍵“cartProduct”和一個包含對象數組的值

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

我嘗試制作函數從localstorage獲取數據，設置狀態並以輸入形式顯示，但數據仍然沒有出現。

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(...) 未定義”如何解決？

Answer 1

您正在嘗試將對象保存到本地存儲中。 您必須先將其轉換為字符串。 像下面這樣

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

Answer 2

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

它會起作用！

Answer 3

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>
  );
}