Remove notification messages on refresh

Question

Sometimes the notification messages don't get disappear on page reload or when I navigate to the different page.

Is there some kind of timeout for the notification message or some session cookies?

I followed this link

Magento 2 : Error/Success message won't remove from page after refresh once display

But where should I put this code so that _deleteMessage call every time when the page reloads or user navigates to a different page.

This issue is more prominent in iPhone devices safari browser.

This is my code in messages.js

  this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text')[_.unique($.cookieStorage.get('mage-messages'), 'text').length-1];
  this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });
  if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }
  customerData.set('messages', {messages: ""});
  $.cookieStorage.set('mage-messages', '');

On further debugging, My code randomly breaks anywhere due to WebAPI socket error on console js debugging.

So this WebAPI socket error doesn't let this cookie clear. This issue is intermittent.

Thanks in advance

Answer 1

I resolved it using setInterval,

    return Component.extend({
    defaults: {
        cookieMessages: [],
        messages: []
    },

    /** @inheritdoc */
    initialize: function () {
        this._super();

        $('#validation-login-cust').html('');
        $('#valid-promo-cart').html('');
        try {
            var message = _.unique($.cookieStorage.get('mage-messages'), 'text');
            var textMessage =  JSON.parse(message[0]["text"]);
            if (textMessage['type'] === "inline"){
                $(textMessage["selector"]).text(textMessage["message"]).css('color', 'red');
            }

            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            customerData.set('messages', {messages: ""});
            $.cookieStorage.set('mage-messages', '');

        }catch (e) {

            $('#validation-login-cust').html('');
            $('#valid-promo-cart').html('');
            var messageText = _.unique($.cookieStorage.get('mage-messages'), 'text')[_.unique($.cookieStorage.get('mage-messages'), 'text').length-1];
            if (messageText) {
                if (messageText["text"].trim() == "Invalid Form Key. Please refresh the page.") {
                    this.cookieMessages = 'OOps! Something went wrong, Please try again later or refresh the page.';
                } else {
                    this.cookieMessages = messageText;
                }
            }
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }
        }
        var setCookieInterval = setInterval(function()
        {
            $.cookieStorage.set('mage-messages', '');
            YX_UI_UTIL.eraseCookie("mage-messages");

        }, 3000);
        setTimeout(function( ) { clearInterval(setCookieInterval); }, 10000);
    }
});