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

You can refer this link https://stackoverflow.com/questions/4079280/javascript-communication-between-browser-tabs-windows — Rinkal Garg, Jan 14 '19 at 06:57
I didn't use cookies I use localStorage and this is not working — Farshad Fahimi, Jan 14 '19 at 07:01
Need not to complicate things. If your data is updated and you just want to refresh to display the updated values, just refresh the browser tabs. In fact, Internet users are well trained to refresh the browsers after they update something important (like the items in cart). Also, when they're checking out, I bet you have a confirmation page of the contents in your cart. Therefore, need not to worry about outdated information in other browser tabs. — Raptor, Jan 14 '19 at 07:07

score 2 · Answer 1 · answered Jan 14 '19 at 06:58

As browser tabs are in client side, the only possible way to do so is to refresh all browser tabs to load the latest/up-to-date data.

To do so, you can use JS:

browser.tabs.reload();

However, please note that this is a new JS function and it's not currently supported by all browsers. See compatibility here.

score 2 · Accepted Answer · answered Sep 03 '19 at 06:11

2

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

answered Sep 03 '19 at 06:11

Farshad Fahimi

609
9
20

How update local storage in all opened tab

2 Answers2