хранение корзины данных в куки занимает большой размер

Question

У меня проблема при вводе данных в куки.

данные представляют собой массив и его большой размер, такой как product_id, name и многие другие.

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

так что мой вопрос, где хранятся данные? потому что я проверил это даже в локальном хранилище пусто

то, что я сделал, выглядит так: Я ввожу данные в куки с массивом данных и меняю их на JSON.stringify. в этом случае я просто поместил туда 2 данных и получил размер 2539, что означает его большой.

Мой контроллер добавить в корзину

import db from '../../config/conn';

export const addToCart = (req,res) =>{
    var today = new Date();
    var tomorrow = new Date();
    tomorrow.setDate(today.getDate() + 1);
    let reqBody = JSON.stringify(req.body);
    let cart = [];
    if(typeof req.cookies.cart == "undefined"){
        cart.push(reqBody);
    }else{
        cart = JSON.parse(req.cookies.cart);
        cart.push(reqBody);
    }

    cart = JSON.stringify(cart);
    res.cookie('cart', cart, { maxAge: 24 * 60 * 60 * 1000, expired: tomorrow})
    return res.status(200).json(cart);
}

Сервер

import express from 'express';
import bodyParser from 'body-parser';
// import passport from 'passport';
import connection from './config/conn';
import { CategoryRoutes,ProductRoutes,CartRoutes} from './modules';
import session  from 'express-session';
import csrf  from 'csurf'
import cors from 'cors'
import cookieParser  from 'cookie-parser'
const app = express();
app.use(cookieParser());
app.use(session({
    secret: 'iCtkGVe0-4FKIGgBopL2QUM9K-jIK9miZhQE',
    resave: false,
    saveUninitialized: true,
    cookie: { 
        secure: true,
        httpOnly: true,
        maxAge: 24 * 60 * 60 * 1000
     }
}));

app.use(csrf({ cookie: true }));

app.use((req,res,next)=>{
    res.header('X-XSS-Protection', '1; mode=block');
    res.header('X-Frame-Options','deny');
    res.header('X-Content-Type-Options','nosniff');
    res.removeHeader("X-Powered-By");
    res.cookie('c_token', req.csrfToken());
    next();
})
app.use(cors({ origin:'http://localhost:3000/',credentials:true}))

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use('/api/', [CategoryRoutes, ProductRoutes, CartRoutes]);

const port = process.env.PORT || 5000;
app.listen(port, (err) => {
    if(err){
        console.log(err);
    }else{
        console.log(`Server running on port ! ${port}`);
    }

});

Что мне делать? Как правильно создать систему корзины?

Answer 1

как правильно создать систему корзины?

Как бы глупо это ни звучало, не существует "правильного способа" сделать много вещей в программировании. Лично я склонен хранить информацию о корзине в местном хранилище, которое в моих случаях работает нормально. Сохранение его в cookie-файлах возможно, но имеет отрицательный побочный эффект: этот cookie-файл будет отправляться при каждом запросе, даже для изображения или вызова API (если ваш API работает в том же домене).

поэтому мой вопрос, где хранятся данные?

Многие веб-сайты не хранят его в локальном хранилище или локально на компьютере в любом месте. Они хранят его на сервере, и когда вы открываете страницу, они получают его. Файл cookie в основном хранит только маркер аутентификации, который используется для получения элементов корзины из API. Представьте себе конечную точку, такую ​​как http://mywebshop.com/api/cart_items, которая возвращает список элементов.

Преимущества этого метода, которого нет в хранилище localalstorage, заключается в том, что при переходе на другой компьютер (но с тем же логином) ваша корзина все равно будет присутствовать. Кроме того, в продвинутых сценариях я мог бы представить, что нужно удалить элементы из всех корзин, в которых есть этот элемент, когда он удаляется с веб-сайта.