是否有方法将更改图像保存到ember.js中的本地存储

xpcnnkqh  于 2022-09-28  发布在  其他
关注(0)|答案(1)|浏览(134)

我一直在尝试在我的电子商务中实现购物车功能。在这个购物车功能中,每当我添加一个项目时,如果它已经存在于购物车中,我们必须增加数量。一切正常,但每当我刷新浏览器或添加新项时,值就会恢复。我该如何解决这个问题。
我的前端是灰烬。js v3.4.4和后端Ruby on Rails v7.0.2.3
我用于本地存储的插件是ember localstorage插件
下面我附加了一段代码,说明如何将元素添加到购物车中

// app/service/shopping-cart.js

addItem(itemId){
    const itemArray = this.itemsIds.content;
    const index = itemArray.findIndex(object => object.id === itemId.id);
    const itemElement = itemArray[index];
    console.log(itemElement);
    if(itemElement){

        console.log(itemId);
        const quantityOfAddedElement = parseInt(itemId.quantity) + parseInt(itemElement.quantity);
        console.log(quantityOfAddedElement);
        const totalPrice = parseInt(itemId.price) + parseInt(itemElement.price);
        itemElement.quantity = quantityOfAddedElement;
        itemElement.price = totalPrice;
        console.log(quantityOfAddedElement);
    }
    else{
        this.get('itemsIds').addObject((itemId));
    }
}
// app/controller/product.js
actions:{
    addToItem(model){
        const id = model.id;
        const title = model.title;
        const quantity = this.quantity;
        const images = model.images;
        const price = quantity * model.price;
        const dbQuantity = model.quantity;

        this.shoppingCart.addItem({
            id,
            title, 
            price,
            quantity,
            images,
        });
    },
 }
daolsyd0

daolsyd01#

您可以在Ember中读取和写入本地存储。js使用普通JavaScript:

// reading shopping cart items from local storage
const shoppingCartItems = JSON.parse(
  window.localStorage.getItem('shoppingCartItems')
);

// writing shopping cart items to local storage
shoppingCartItems.push('myItemId');
window.localStorage.setItem(
  'shoppingCartItems',
  JSON.stringify(shoppingCartItems)
);

此外,您应该在另一个浏览器选项卡中侦听由于更改本地存储而导致的本地存储事件,并相应地更新本地状态。
为了简化这一切,我写了ember-local-storage-decorator。它提供了一个@localStorage装饰器。用它装饰的类属性将反映本地存储值。它与自动跟踪集成在一起。

相关问题