Как сохранить созданный мной JSON файл в react typescript в localStorage в браузере?
[
{
"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 )
Источник: Stack Overflow на русском