Magento 2 :What is the different between invalidate and reload if they both update the sections?

Question

If some section should be updated then customerData.invalidate(sections)

if you sure, that you really need update some section you can always do something like this: customerData.reload(['cart'], false)

This is taken from the answer Magento 2: how do customer sections / sections.xml work?

What is the different between invalidate and reload if they both update the sections?

Answer 1

I could not find much difference between invalidate and reload other than that invalidate triggers customer-data-invalidate

vendor/magento/module-customer/view/frontend/web/js/customer-data.js @ line 338

invalidate: function (sectionNames) {
            var sectionDataIds,
                sectionsNamesForInvalidation;

            sectionsNamesForInvalidation = _.contains(sectionNames, '*') ? buffer.keys() : sectionNames;
            $(document).trigger('customer-data-invalidate', [sectionsNamesForInvalidation]);
            buffer.remove(sectionsNamesForInvalidation);
            sectionDataIds = $.cookieStorage.get('section_data_ids') || {};

            // Invalidate section in cookie (increase version of section with 1000)
            _.each(sectionsNamesForInvalidation, function (sectionName) {
                if (!sectionConfig.isClientSideSection(sectionName)) {
                    sectionDataIds[sectionName] += 1000;
                }
            });
            $.cookieStorage.set('section_data_ids', sectionDataIds);
        },

and reload triggers customer-data-reload

vendor/magento/module-customer/view/frontend/web/js/customer-data.js @ line 328

reload: function (sectionNames, updateSectionId) {
            return dataProvider.getFromServer(sectionNames, updateSectionId).done(function (sections) {
                $(document).trigger('customer-data-reload', [sectionNames]);
                buffer.update(sections);
            });
        },

However, both of them do the same thing i.e clear localstorage but it seems they clear different things in local storage.

For invalidate (customer-data-invalidate) following code is called ;

vendor/magento/module-catalog/view/frontend/web/js/product/storage/data-storage.js @line 72

initCustomerDataReloadListener: function () {
            $(document).on('customer-data-invalidate', this._flushProductStorage.bind(this));

            return this;
        }

which ultimately calls

_flushProductStorage: function (event, sections) {
            if (_.isEmpty(sections) || _.contains(sections, 'product_data_storage')) {
                this.localStorage.removeAll();
            }
        },

same as reload (customer-data-reload)

vendor/magento/module-catalog/view/frontend/web/js/product/storage/ids-storage.js @line 82

initCustomerDataReloadListener: function () {
            $(document).on('customer-data-reload', function (event, sections) {
                if ((_.isEmpty(sections) || _.contains(sections, this.namespace)) && ~~this.allowToSendRequest) {
                    this.localStorage.removeAll();
                    this.data();
                }
            }.bind(this));

            return this;
        },