【问题标题】:How to count specific ID's in localStorage?如何计算localStorage中的特定ID?
【发布时间】:2019-10-10 19:44:22
【问题描述】:

我正在为我的投资组合项目编写用户购物车。我想保存产品的 ID 以及存储中有多少特定 ID 的计数。 我希望我的数据看起来像这样:

[
  {id: '64783', count: '5'},
  {id: '111', count: '50'},
]

由于数据在 localStorage 我已经用户 JSON 解析和字符串化,但我不知道如何在上面列出的 LS 中实现数据模型。 当然,我可以只存储多个 ID,即使它们相同,然后在显示购物车时对其进行过滤,但我认为这不是最佳选择。

export const addToCart = (id, userIsLoggedIn) => {
    let cart = [];
    let itemToAdd = {
        id,
        count: 0,
    };
    if (localStorage.getItem('cart')){
        cart = JSON.parse(localStorage.getItem('cart'));
        let count = cart.filter(el => el.id === id).length
        console.log(count)
    }
    cart.push(itemToAdd);
    localStorage.setItem('cart', JSON.stringify(cart))
    console.log(localStorage.getItem('cart'))
};

我可以正确获取 count 的值,但我的函数仍然附加整个对象,而不是更新项目的计数。

我该如何解决这个问题?

【问题讨论】:

  • 试试cart.filter(el => el.id === id).length,因为每个元素都是一个具有id属性的对象
  • cart 是一个数组,没有属性count。数组中的对象具有该属性

标签: javascript reactjs object local-storage


【解决方案1】:

这段代码将

  1. localStorage 读取cart
  2. 检查 id 是否存在于购物车中
  3. 如果是,增加计数
  4. 否则添加计数为 1 的项目
  5. 如果 localStorage 为空,则创建整个对象

所以,代码是

export const addToCart = (id, userIsLoggedIn) => {
    let cart = [];
    let itemToAdd = {
        id,
        count: 1,
    };
    if (localStorage.getItem('cart')) {
        cart = JSON.parse(localStorage.getItem('cart'));
        let item = cart.find(el => el.id === id);
        if (!item) {
            cart.push(itemToAdd);
        } else {
            item.count ++;
        }
    } else {
        cart = [itemToAdd];
    } 
    localStorage.setItem('cart', JSON.stringify(cart))
    console.log(localStorage.getItem('cart'))
};

或者

export const addToCart = (id, userIsLoggedIn) => {
    let cart = {};
    if (localStorage.getItem('cart')) {
        cart = JSON.parse(localStorage.getItem('cart'));
    }
    cart[id] = (cart[id] || 0) + 1;
    localStorage.setItem('cart', JSON.stringify(cart));
    console.log(localStorage.getItem('cart'));
};

在这种方法中,购物车内容是这样的

{
    "1111": 2,
    "1234": 1
}

【讨论】:

  • 是的,我注意到了这一点并编辑了原始代码。重复结果的问题仍然存在。
  • @DanielSkoroś - 哦,对了 - 从你的代码中我没看出这是问题所在 - 所以每个 ID 只会出现一次?
  • 现在结果如下所示:[{"id":"5d8b61034a425f055001e9dd","count":0},{"id":"5d8b61034a425f055001e9dd","count":1},{ "id":"5d8b61034a425f055001e9dd","count":2},{"id":"5d8b61034a425f055001e9dd","count":3},{"id":"5d8b61034a425f055001e9dd","count":4},{"id ":"5d8b61034a425f055001e9dd","count":5},{"id":"5d8b61034a425f055001e9dd","count":6},{"id":"5d8b61034a425f055001e9dd","count":7},{"id": "5d8b61034a425f055001e9dd","count":8}]
  • 我很确定你现在看到了我想要实现的目标
  • 当然有更好的方法...但这涉及更改您存储在 localStorage 中的对象...我将添加代码供您考虑
猜你喜欢
  • 2023-01-31
  • 2020-05-14
  • 2015-11-25
  • 1970-01-01
  • 2018-09-04
  • 2021-08-30
  • 1970-01-01
  • 1970-01-01
  • 2019-07-15
相关资源
最近更新 更多