Magento2 – How Customer Data is Set on Local Storage

customerlocal-storagemagento2

I want to find out which js sets the customer data in local storage in magento2.

Best Answer

The customer data component is added in the layout:

vendor/magento/module-customer/view/frontend/layout/default.xml

<block name="customer.customer.data"
    class="Magento\Customer\Block\CustomerData"
    template="Magento_Customer::js/customer-data.phtml"/>

and loaded in the template:

vendor/magento/module-customer/view/frontend/templates/js/customer-data.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Customer\Block\CustomerData $block */
?>
<script type="text/x-magento-init">
<?= /* @noEscape */ $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonEncode([
        '*' => ['Magento_Customer/js/customer-data' => [
            'sectionLoadUrl' => $block->getCustomerDataUrl('customer/section/load'),
            'expirableSectionLifetime' => $block->getExpirableSectionLifetime(),
            'expirableSectionNames' => $block->getExpirableSectionNames(),
            'cookieLifeTime' => $block->getCookieLifeTime(),
            'updateSessionUrl' => $block->getCustomerDataUrl('customer/account/updateSession'),
        ]],
    ]);
?>
</script>

The component prototype is:

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

And all data loading in the line near 200, in the init method of the customer data class:

if (privateContent &&
    !$.cookieStorage.isSet(privateContentVersion) &&
    !$.localStorage.isSet(privateContentVersion)
) {
    $.cookieStorage.set(privateContentVersion, needVersion);
    $.localStorage.set(privateContentVersion, needVersion);
    this.reload([], false);
    isLoading = true;
} else if (localPrivateContent !== privateContent) {
    if (!$.cookieStorage.isSet(privateContentVersion)) {
        privateContent = needVersion;
        $.cookieStorage.set(privateContentVersion, privateContent);
    }
    $.localStorage.set(privateContentVersion, privateContent);
    _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
        buffer.notify(sectionName, sectionData);
    });
    this.reload([], false);
    isLoading = true;
} else if (expiredSectionNames.length > 0) {
    _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
        buffer.notify(sectionName, sectionData);
    });
    this.reload(expiredSectionNames, false);
} else {
    _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
        buffer.notify(sectionName, sectionData);
    });

    if (!_.isEmpty(storageInvalidation.keys())) {
        this.reload(storageInvalidation.keys(), false);
    }
}

if (!_.isEmpty(privateContent)) {
    countryData = this.get('directory-data');

    if (_.isEmpty(countryData()) && !isLoading) {
        customerData.reload(['directory-data'], false);
    }
}

The main method responsible for data loading (reload) is calling a data providers getFromServer method:

/**
* @param {Array} sectionNames
* @param {Boolean} forceNewSectionTimestamp
* @return {*}
*/
reload: function (sectionNames, forceNewSectionTimestamp) {
    return dataProvider.getFromServer(sectionNames, forceNewSectionTimestamp).done(function (sections) {
        $(document).trigger('customer-data-reload', [sectionNames]);
        buffer.update(sections);
    });
},

To reload all data the sectionsNames must be an empty array.

Related Topic