Javascript 将数据车存储到Cookie中需要很大的空间

我在将数据输入cookie时遇到问题

数据是一个数组，它的大小很大，比如product_id、name等等

但我看到一些电子商务网站的“添加到购物车”数据功能并没有直接存储到cookies中，而是只进行了设置，因为当我删除cookies时，数据会丢失，但当添加新数据时，内存cookies不会增加

那么我的问题是数据存储在哪里？因为即使在本地存储中我也检查过它是空的

我所做的是这样的： 我使用数据数组将数据输入cookies，并将其更改为

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}`);
    }

});

我应该怎么做？如何以正确的方式创建购物车系统

如何以正确的方式创建购物车系统

虽然听起来很俗气，但在编程中没有“正确的方法”来做很多事情。 就我个人而言，我倾向于将购物车信息存储在localstorage中，这对于我的案例来说效果很好。将其存储在cookie中是可能的，但有一个负面的副作用，即此cookie将随每个请求一起发送，即使是针对映像或api调用（假定您的api在同一域上运行）

所以我的问题是数据存储在哪里

许多网站不将其存储在本地存储中，也不将其存储在本地计算机上的任何位置。他们将其存储在服务器上，当您打开页面时，他们将检索该页面。cookie主要只存储用于从api获取购物车项目的身份验证令牌。想象一下有一个像

http://mywebshop.com/api/cart_items

返回项目列表

---

这种存储在localstorage中的方法的优点是，当您移动到另一台计算机（但具有相同的登录名）时，您的购物车仍然存在。此外，在高级场景中，我可以想象，当从网站上删除某个项目时，我想从包含该项目的所有购物车中删除该项目。

是的，这绝对是一种方法。将数据存储在服务器上，并且仅在客户端本地存储登录身份验证信息（例如令牌）。当客户需要时，使用客户机的登录名从服务器获取项目并将其返回给他们。我也同意这种解决方案。它既解决了效率问题（即不必要地传递大量数据），也解决了安全问题。