Как сохранить созданный мной JSON файл в react typescript в localStorage в браузере?

Рейтинг: 0Ответов: 0Опубликовано: 30.03.2023
[ 
    {
        "id": 1,
        "url": "../src/components/images/aos.svg",
        "name": "AOS",
        "size": "450ml",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Средство для мытья посуды Crystal",
        "price": 48.76
    },
    {
        "id": 2,
        "url": "../src/components/images/ariel.svg",
        "name": "ARIEL",
        "size": "15X28.8 г",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Автомат Гель СМС жидкое в растворимых капсулах Liquid Capsules Горный родник",
        "price": 23.98
    },
    {
        "id": 3,
        "url": "../src/components/images/bimax.svg",
        "name": "BIMAX",
        "size": "1500",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Порошок стиральный Автомат 100 пятен COMPACT",
        "price": 50.23
    },
    {
        "id": 4,
        "url": "../src/components/images/biomio.svg",
        "name": "BIOMIO",
        "size": "90 г",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "BIO-SOAP Экологичное туалетное мыло. Литсея и бергамот",
        "price": 15.45
    },
    {
        "id": 5,
        "url": "../src/components/images/sorti.svg",
        "name": "SORTI",
        "size": "450 мл",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Ср-во для мытья посуды Апельсин+мята",
        "price": 67.23
    },
    {
        "id": 6,
        "url": "../src/components/images/aos.svg",
        "name": "AOS",
        "size": "450ml",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Средство для мытья посуды Crystal",
        "price": 45.45
    },
    {
        "id": 7,
        "url": "../src/components/images/ariel.svg",
        "name": "ARIEL",
        "size": "15X28.8 г",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Автомат Гель СМС жидкое в растворимых капсулах Liquid Capsules Горный родник",
        "price": 34.67
    },
    {
        "id": 8,
        "url": "../src/components/images/bimax.svg",
        "name": "BIMAX",
        "size": "1500",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Порошок стиральный Автомат 100 пятен COMPACT",
        "price": 50.23
    },
    {
        "id": 9,
        "url": "../src/components/images/biomio.svg",
        "name": "BIOMIO",
        "size": "90 г",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "BIO-SOAP Экологичное туалетное мыло. Литсея и бергамот",
        "price": 15.45
    },
    {
        "id": 10,
        "url": "../src/components/images/sorti.svg",
        "name": "SORTI",
        "size": "450 мл",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Ср-во для мытья посуды Апельсин+мята",
        "price": 67.90
    },
    {
        "id": 11,
        "url": "../src/components/images/aos.svg",
        "name": "AOS",
        "size": "450ml",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Средство для мытья посуды Crystal",
        "price": 18.81
    },
    {
        "id": 12,
        "url": "../src/components/images/biomio.svg",
        "name": "BIOMIO",
        "size": "90 г",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "BIO-SOAP Экологичное туалетное мыло. Литсея и бергамот",
        "price": 35.20
    },
    {
        "id": 13,
        "url": "../src/components/images/ariel.svg",
        "name": "ARIEL",
        "size": "15X28.8 г",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Автомат Гель СМС жидкое в растворимых капсулах Liquid Capsules Горный родник",
        "price": 79.51
    },
    {
        "id": 14,
        "url": "../src/components/images/aos.svg",
        "name": "AOS",
        "size": "450ml",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Средство для мытья посуды Crystal",
        "price": 19.01
    },
    {
        "id": 15,
        "url": "../src/components/images/bimax.svg",
        "name": "BIMAX",
        "size": "1500",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Порошок стиральный Автомат 100 пятен COMPACT",
        "price": 100.02
    },
    {
        "id": 16,
        "url": "../src/components/images/bimax.svg",
        "name": "BIMAX",
        "size": "1500",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Порошок стиральный Автомат 100 пятен COMPACT",
        "price": 83.67
    },
    {
        "id": 17,
        "url": "../src/components/images/ariel.svg",
        "name": "ARIEL",
        "size": "15X28.8 г",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "Автомат Гель СМС жидкое в растворимых капсулах Liquid Capsules Горный родник",
        "price": 42.01
    },
    {
        "id": 18,
        "url": "../src/components/images/biomio.svg",
        "name": "BIOMIO",
        "size": "90 г",
        "barcode": 4604049097548,
        "maker": "Нэфис",
        "brand":  "AOS",
        "description": "BIO-SOAP Экологичное туалетное мыло. Литсея и бергамот",
        "price": 14.09
    }
]

Что мне для этого нужно сделать? Создать отдельный файл, туда импортировать json данные и преобразовать их строку? Затем через метод localStorage.setItem положить в localStorage? Я пыталась так сделать, но ничего не получилось.

import React from "react"; import data from '../data.json';

let jsonString = JSON.stringify(data)

console.log(data.name)

fetch('http://localhost:3001/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: jsonString,   })
    .then()

localStorage.setItem('name', 'AOS') console.log( jsonString )

Ответы

Ответов пока нет.