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?

1 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 = _.contains(sectionNames, '*') ? buffer.keys() : sectionNames;
            $(document).trigger('customer-data-invalidate', [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]);

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')) {

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) {

            return this;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.