Customer data can’t be found in Local Storage of a browser

Link an issue: https://github.com/magento/magento2/issues/14912

I came across this issue on my customer website. I added a downloadable product ( which needs to be login to checkout), then I logged into, but when I clicked on the checkout button in cart sidebar, it gave me authentication popup.

Due to customer data on Local Storage is not loaded/initiated. So my solution is to check whether customer data exists on the Local Storage or does not. Then if it doesn’t, we will make it expired. So it will be loaded again from the server again.

Here a quick fix for this issue below. But I think the Magento team should check and fix it an issue.

Create a mixin

var config = {
 config: {
     mixins: {
         'Magento_Customer/js/customer-data': {
             
             'FixBugs_CustomerLocalStorageIssue/js/customer-data-mixin': true
             
         }
     }
 }
};   

/**
 * trunglv - Fixing bugs
 * 
 */
define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';

    var mixin = {
        /**
         * @param {Function} originFn - Original method.
         * @return {Array}
         */
        getExpiredSectionNames: function (originFn) {
            var expiredSectionNames = originFn(),
                storage = $.initNamespaceStorage('mage-cache-storage').localStorage,            
                sectionData;
            
            /* to add more if you want. It temporary fix for customer data on local storage */
            var sectionNames = ['customer'];
            
            _.each(sectionNames, function (sectionName) {
                
                sectionData = storage.get(sectionName);
                
                if(typeof sectionData === 'undefined'){
                        expiredSectionNames.push(sectionName);
                }
                
            });
            return expiredSectionNames;
        }
    };

    /**
     * Override default customer-data.getExpiredSectionNames().
     */
    return function (target) {
        return wrapper.extend(target, mixin);
    };
});

— Another solution, but need to fix core —

Add section “customer” into expiredSectionNames

<type name="Magento\Customer\Block\CustomerData">
        <arguments>
            <argument name="expirableSectionNames" xsi:type="array">
                <item name="customer" xsi:type="string">customer</item>
            </argument>
        </arguments>
    </type>

In JS file : Magento_Customer/js/customer-data

getExpiredSectionNames: function () {
            var expiredSectionNames = [],
                cookieSectionTimestamps = $.cookieStorage.get('section_data_ids') || {},
                sectionLifetime = options.expirableSectionLifetime * 60,
                currentTimestamp = Math.floor(Date.now() / 1000),
                sectionData;

            // process sections that can expire due to lifetime constraints
            _.each(options.expirableSectionNames, function (sectionName) {
                sectionData = storage.get(sectionName);

                if (typeof sectionData === 'object' && sectionData['data_id'] + sectionLifetime <= currentTimestamp) {
                    expiredSectionNames.push(sectionName);
                }else{
                    /* Here is my fixing*/
                    if(typeof sectionData == 'undefined'){
                        expiredSectionNames.push(sectionName);
                    }
                }
            });

            // process sections that can expire due to storage information inconsistency
            _.each(cookieSectionTimestamps, function (cookieSectionTimestamp, sectionName) {
                sectionData = storage.get(sectionName);

                if (typeof sectionData === 'undefined' ||
                    typeof sectionData === 'object' &&
                    cookieSectionTimestamp != sectionData['data_id'] //eslint-disable-line
                ) {
                    expiredSectionNames.push(sectionName);
                }
            });

            return _.uniq(expiredSectionNames);
        },

Leave a Reply

Your email address will not be published. Required fields are marked *