react localstorage

FARTYIY

@kirilljsx Привет, хочу чтобы когда человек добавляет в корзину товар, он у него там же оставался даже после перезагрузки сайта, а если удалял, чтобы товар удалялся. Сама корзина готова, и удаление и добавление

kirilljsx

@FARTYIY Ну смотри, так как ты в react пробуешь все это дело, то тебе нужно использовать хуки useEffect и useState.

А именно, тебе сначала нужно сделать состояние, примерно так:

const [cart, setCart] = useState(() => {
    const saveCart = localStorage.getItem('cart');
    return saveCart ? JSON.parse(saveCart):[];
});

Смотри что тут происходит через getItem('cart') ты получаешь состояние корзины для текущего пользователя, и передаешь в переменную saveCart,

Обрати внимание на return, здесь используется ? это тернарный оператор (надеюсь ты читал про это ) тем самым ты проверяешь есть ли какие-либо данные, если да то парсишь их, если нет то возвращаешь пустой массив.

Опять же, так как это корзина у тебя, тебе при загрузке страницу (компонента корзины) надо эти данные подтягивать, тут на помощь придет - useEffect, при мерно так:

useEffect(() = > {
    localStorage.setItem('cart', JSON.stringify(cart))
}, [cart]);

Тут при загрузке компонента корзины мы вызываем наш стейте - const [cart, setCart] = useState(() => {...};

Обрати также внимание на то что в конце useEffect мы передаем нашу корзина [cart] - это нужно для того что бы каждый раз менять состояние корзины (смотря что там у тебя счетчик или еще чего)

Ну а дальше ты уже манипулируешь данными корзины через переменную cart которую мы сделал через состояние useState.

Про добавление в localStorage, я так понимаю у тебя уже есть функции добавления и удаления товаров в корзину (предположим)

// Функция добавления
const addToCart = (product) => {
    setCart((prevCart) => [...prevCart, product])
};
// Функция удаления
const removeFromCart = (productId) => {
    setCart((prevCart) => prevCart.filter(item => item.id !== productId)
}

Тут дело с манипуляцией localstorage мы не используем стандартные функции его самого по типу: getItam() кроме в стейте, setItam и другие. Поподробнее можешь почитатать тут если нужна нативная манипуляция - https://learn.javascript.ru/localstorage

За нас тут в первом случае при добавлении делает синтаксис Spread, через спрайд мы создаем совершенно новый массив, берем все элементы из старой корзины (состояния) и перекладываем в новый массив [...prevCart], вторым аргументом мы передает новый товар (новый элемент массива) [...prevCart, product]

У тебя может возникнуть вопрос откуда у нас взялся prevCart - по сути это может быть любым название, вся магия происходит в реакте под капотом так как наша функция setCart - это элемент обновления (функция обновления) которую мы написали в самом начале const [cart, setCart] = useState(() => )}

Теперь про функцию removeFromCart, тут аналогично, мы через setCart() берем наш массив prevCart опять же мы его исходный не изменяем и далее проходимся через функцию filter() проходимся по каждому товару и возвращаем новый массив.
А по условию следующее: в новый массив попадают только те элементы чей id не совпадает с удаляемым.
Обрати внимание на item.id мы обращаемся через точку нашего элемента к его id. Какая у тебя там структура ты уже сам должен знать

И самое главное почему так - это безопасное обновление состояния которое заставляет реакт перерисовывать корзину без удаления товара.

К тому же почему мы создаем каждый раз новый массив, сам localStorage не имеет понятия массив, добавить элемент и т.д. он умеет хранить лишь одну сплошную строку текста под определенным ключом.

Для примера, у нас есть в локалстораже ключ cart, и имеет значение:

cart: '[{"id":1,"name":"Кроссовки"},{"id":2,"name":"Футболка"}]'

Если мы на прямую попробуем передавать продукт через setItem(key, value) он будет работать как топор который не вставляет в конец массива что-то, а тупо берет новое значение и вырубает строе под этим ключом ставя на его место новое.

Надеюсь этой информации тебе будет достаточно, я старался

kirilljsx

А и еще, учись работать со спрайдами Spread в реакте - это будет твоим ключем к успеху для манипуляции данных

Aladdin

@FARTYIY для начала, лучше расскажи используешь какой либо менеджер состояний
mobx, react context, redux, zustand. Это важно потому, что обычно задача про корзину решается именно через state manager или react context.

Фрагмент кода тоже будет не лишним

FARTYIY

@kirilljsx Большое тебе спасибо, что нашел время помочь мне. Я действительно надеюсь, что смогу разобраться во всем этом в будущем. Сейчас я мало что понимаю, так как мои функции добавления и удаления отличаются от ваших, но я думаю, что смогу понять концепцию. Еще раз спасибо!

FARTYIY

@Aladdin я не разбираюсь пока в этом

kirilljsx

@FARTYIY Разберешься обязательно! Уж прости времени на дискорд пока нету ((

Ты если что пиши вопросы и создавай темы - обязательно поможем и подскажем

FARTYIY

@kirilljsx Хорошо! Если вдруг появится время, было бы отлично, я готов буду за это заплатить. Большое спасибо, что отреагировал на мой пост

FARTYIY

@kirilljsx Привет. Я понимаю всё что ты мне написал. Но как и куда это записывать в случае с моим кодом я не знаю . Может у тебя будет свободные пол часа на этих выходных и ты сможешь мне помочь с этим. Сроки заказа уже поджимают а я стою на одном месте… Я готов заплатить, только помоги пожалуйста Я буду очень благодарен. Может есть знакомый кто смог бы помочь

kirilljsx

@FARTYIY Ох емае, во что ты там вписался то?
Блин, у меня в эти выходные прям максимально забиты . В чем у тебя проблема конкретно?

FARTYIY

@kirilljsx Запутался в коде и не могу понять куда писать и что именно. В общем всё, стою на месте. Я уже правда готов заплатить сколько скажешь. Любой свободный день - я подстроюсь. Только лишь бы помогли…(

kirilljsx

@FARTYIY отодвигай проект, скажи что заболел и потребуется еще несколько дней.
Вот мой тг, пиши, вечером смогу посмотреть код: @kdvoryaninov