Question

我需要更新我正在使用localStorage的javascript Cart类中的所有数据

我有一个管理购物车的javascript类，当用户单击添加产品时，将数据存储在localStorage中，而Cart类则使用localStorage更新数据

购物车课程

class Cart{
    constructor(){
        this._token = 'fafacart_items';

        this._items = null;


        this._orderId = null;

        this._shipping = {
            id: null,
            city: null,
            type: 'post',
            name: '',
            mobile: '',
            email: '',
            address: '',
            postcode: '',
            national_code: ''
        };

        this._coupon = {
            active: false
        };

        this._paymentMethod = 'online';

        this._validation = null;

        // this.restore();

        window.addEventListener('storage', this.restore())
    }

 restore(){
        var stored = Storage.getItem(this._token);
        console.log(stored)
        if(stored){
            this._items = stored.items;
            this._shipping = Object.assign({}, this._shipping,   stored.shipping);
            this._coupon = Object.assign({}, this._coupon, stored.coupon);
            this._paymentMethod = stored.paymentMethod;
            this._validation = stored.validation;
            this.orderId = stored.orderId;
        } else {
            this._items = [];
        }

        if(this._items.length == 0)
            this.valid = true;
    }


}

CartHolder是一个反应组件我只是导入Cart类和setState，如下所示

export default class CartHolder extends Component {
    constructor(props) {
        super(props);

        this.state = {
            cart: null
        };

        this.restore = this.restore.bind(this);
    }

    componentWillMount(){
        if(this.props.paid){
            Cart.empty();
        }

        this.listen('add-to-cart', product => {
            Cart.add(product);

            this.restore();
        });

        this.restore();
    }

    restore(){
        this.setState({cart: Cart});
    }
}

当我单击“添加产品”时，期望更新所有标签中的所有购物车数据，而不仅仅是当前标签中的

Answer 1

我的所有研究最终发现，在更新域的一个选项卡中的本地存储时，在更新时打开该域时，其他所有带有该域的选项卡

Answer 2

由于浏览器选项卡位于客户端，因此唯一可行的方法是刷新所有浏览器选项卡以加载最新/最新数据。

为此，您可以使用JS：

browser.tabs.reload();

但是，请注意，这是一个新的JS函数，目前并非所有浏览器都支持。请参阅兼容性here。

如何在所有浏览器标签中更新购物车数据

2 个答案: