How update local storage in all opened tab

Question

I'm storing all my data in browser local storage and have class named Cart to manage the data in the local storage.

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


}

I have an other class named CartHolder that show all data in local storage. It had an global event for listen action button named add-to-cart after this method execute update the local storage on browser.

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

when the local storage is updated I can not see the data on the other browser tab is opened before and I just see the data in current tab and with refresh the other tabs I can see the data on them.

I want to see updated local storage data in other tabs with out refreshing or reloading the browser tabs

Answer 1

After all my research finally found that when update the local storage in the one tab of domain all of the others tab with this domain when open while be updated