如何在所有打开的选项卡中更新本地存储

Question

我将所有数据存储在浏览器本地存储中，并class命名为Cart来管理本地存储中的数据。

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 的 class，它显示本地存储中的所有数据。它有一个名为 add-to-cart 的监听动作按钮的全局事件此方法执行后更新浏览器上的本地存储。

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

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

为此，您可以使用 JS：

browser.tabs.reload();

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

Answer 2

经过我的研究终于发现，当更新域的一个选项卡中的本地存储时，所有其他选项卡在打开时都会更新

如何在所有打开的选项卡中更新本地存储

How update local storage in all opened tab

javascript

shopping-cart

ecmascript-6

reactjs