有没有办法为用户在本地存储中放置一个对象数组，然后在 reactjs 中遍历它？

Question

基本上我一直在制作一个网络应用程序，并试图找出一种方法来将数据从下拉列表中的 api 移动到用户点击他们想“保存”到本地存储的项目，但由于某种原因，当你第一次点击它时它没有注册，你必须再次点击它然后我试图将它保存在本地存储中并且它只是给了我 [object Object]


    const [count, setCount] = useState(0);
    const [products, setProducts] = useState([]);
    const [product, setProduct] = useState([]);


    const setProductData = (data, i) => {

        setCount(count + 1);
        let product = {
            id: data.id,
            product_number: data.product_number
        }
        setProduct([...product, { data }]);
        localStorage.setItem(`Product${i + 1}`, [product.id, product.product_number])
        console.log(data);
    }


    const fetchProducts = async () => {
        await Axios.get(`${process.env.REACT_APP_API}/products`, {
            withCredentials: true
        })
            .then(res => {
                let data = res.data;
                setProducts(data.data);
            }).catch(error => {
                console.error('Error:', error);
            });
    }

    useEffect(() => {
        fetchProducts();
    }, [count]);

    return (
        <div>
            <h1>Select products</h1>
            <div className="mt-5 mb-5">
                <InputGroup>
                    <DropdownButton
                        variant="outline-secondary"
                        title={'Products'}
                        id="dropdown"
                    >
                        {
                            products.map((obj, i) => {
                                let product = obj.product_number;
                                return (
                                    <Dropdown.Item
                                        key={i}
                                        onClick={() => setProductData(obj, i)}>{product}</Dropdown.Item>
                                )
                            })
                        }
                    </DropdownButton>
                </InputGroup>
             </div>
           </div>
)

我尝试了多种方法来使 localStorage.setItem() 尝试获取整个对象，但显示为 [object Object] 或仅显示我需要的部分内容

对于 setProductData 函数中的项目对象，我已经尝试使用数据参数，它只给出了 [object Object]

Answer 1

    localStorage.setItem(`Product${i + 1}`, JSON.stringify([product.id, product.product_number]))

//while fetching you need to parse 

JSON.parse(localStorage.getItem(Product${i + 1}))

Answer 2

一般问题是 localStorage 将数据存储为字符串，因此要使其正常工作，您必须在存储时序列化数据并在读取时反序列化它们

所以对于这种情况 JSON.stringify 存储和 JSON.parse 读取

我觉得你应该序列化并存储整个产品对象

Answer 3

您可以使用localDataStorage 透明地存储JavaScript 数据类型（数组、布尔值、日期、浮点数、整数、字符串和对象）。它还提供轻量级数据混淆，自动压缩字符串，便于通过键（名称）查询以及通过（键）值查询，并通过为键添加前缀来帮助在同一域内实施分段共享存储。此外，它还会分派一个自定义事件，使您可以在发起这些事件的同一 page/tab 上响应 localStorage 更改事件。

[免责声明]我是实用程序的作者[/免责声明]

示例：

localDataStorage.set( 'key1', 'Belgian Chonklit' )
localDataStorage.set( 'key2', 1200.0047 )
localDataStorage.set( 'key3', true )
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localDataStorage.set( 'key5', null )

localDataStorage.get( 'key1' )   -->   'Belgian Chonklit'
localDataStorage.get( 'key2' )   -->   1200.0047
localDataStorage.get( 'key3' )   -->   true
localDataStorage.get( 'key4' )   -->   Object {RSK: Array(5)}
localDataStorage.get( 'key5' )   -->   null

如您所见，尊重原始值，包括对象。在 Angular、ReactJS 或 Vanilla JavaScript.

中使用它

有没有办法为用户在本地存储中放置一个对象数组，然后在 reactjs 中遍历它？

Is there a way to put an array of objects in localstorage for the user then iterate through it in reactjs?

arrays

local-storage

node.js

reactjs