Merge pull request #3230 from magento-trigger/MC-4277

[trigger] MC-4277: Address Product Page slowness due to 'product_data_storage' handling

Author: Joan He

app/code/Magento/Catalog/view/frontend/web/js/product/storage/data-storage.js

@@ -34,6 +34,21 @@ define([
         };
     }
 
+    /**
+     * Set data to localStorage with support check.
+     *
+     * @param {String} namespace
+     * @param {Object} data
+     */
+    function setLocalStorageItem(namespace, data) {
+        try {
+            window.localStorage.setItem(namespace, JSON.stringify(data));
+        } catch (e) {
+            console.warn('localStorage is unavailable - skipping local caching of product data');
+            console.error(e);
+        }
+    }
+
     return {
 
         /**
@@ -118,7 +133,7 @@ define([
             if (_.isEmpty(data)) {
                 this.localStorage.removeAll();
             } else {
-                this.localStorage.set(data);
+                setLocalStorageItem(this.namespace, data);
             }
         },
 

app/code/Magento/Catalog/view/frontend/web/js/product/storage/ids-storage.js

@@ -11,6 +11,21 @@ define([
 ], function ($, _, ko, utils) {
     'use strict';
 
+    /**
+     * Set data to localStorage with support check.
+     *
+     * @param {String} namespace
+     * @param {Object} data
+     */
+    function setLocalStorageItem(namespace, data) {
+        try {
+            window.localStorage.setItem(namespace, JSON.stringify(data));
+        } catch (e) {
+            console.warn('localStorage is unavailable - skipping local caching of product data');
+            console.error(e);
+        }
+    }
+
     return {
 
         /**
@@ -94,11 +109,7 @@ define([
          * Initializes handler to "data" property update
          */
         internalDataHandler: function (data) {
-            var localStorage = this.localStorage.get();
-
-            if (!utils.compare(data, localStorage).equal) {
-                this.localStorage.set(data);
-            }
+            setLocalStorageItem(this.namespace, data);
         },
 
         /**

app/code/Magento/Catalog/view/frontend/web/js/product/storage/storage-service.js

@@ -47,7 +47,7 @@ define([
                  * @param {*} data
                  */
                 add: function (data) {
-                    if (!_.isEmpty(data) && !utils.compare(data, this.data()).equal) {
+                    if (!_.isEmpty(data)) {
                         this.data(_.extend(utils.copy(this.data()), data));
                     }
                 },

dev/tests/js/jasmine/tests/app/code/Magento/Catalog/frontend/js/product/storage/data-storage.test.js

@@ -49,6 +49,7 @@ define([
             injector.clean();
             injector.remove();
         } catch (e) {}
+        window.localStorage.clear();
     });
 
     describe('Magento_Catalog/js/product/storage/data-storage', function () {
@@ -88,18 +89,20 @@ define([
                 };
             });
 
+            afterEach(function () {
+                window.localStorage.clear();
+            });
+
             it('check calls "dataHandler" method with data', function () {
                 var data = {
                     property: 'value'
                 };
 
                 obj.dataHandler(data);
-                expect(obj.localStorage.set).toHaveBeenCalledWith(data);
-                expect(obj.localStorage.removeAll).not.toHaveBeenCalled();
+                expect(window.localStorage.getItem(obj.namespace)).toBe(JSON.stringify(data));
             });
             it('check calls "dataHandler" method with empty data', function () {
                 obj.dataHandler({});
-                expect(obj.localStorage.set).not.toHaveBeenCalled();
                 expect(obj.localStorage.removeAll).toHaveBeenCalled();
             });
         });

dev/tests/js/jasmine/tests/app/code/Magento/Catalog/frontend/js/product/storage/ids-storage.test.js

@@ -27,6 +27,7 @@ define([
             injector.clean();
             injector.remove();
         } catch (e) {}
+        window.localStorage.clear();
     });
 
     describe('Magento_Catalog/js/product/storage/ids-storage', function () {
@@ -40,13 +41,6 @@ define([
                 expect(obj.localStorage.get).toHaveBeenCalled();
             });
         });
-        describe('"cachesDataFromLocalStorage" method', function () {
-            it('check calls localStorage get method', function () {
-                obj.getDataFromLocalStorage = jasmine.createSpy().and.returnValue({});
-
-                expect(obj.localStorage.get).toHaveBeenCalled();
-            });
-        });
         describe('"initLocalStorage" method', function () {
             it('check returned value', function () {
                 obj.namespace = 'test';
@@ -80,17 +74,16 @@ define([
             it('check calls with data that equal with data in localStorage', function () {
                 obj.internalDataHandler(data);
 
-                expect(obj.localStorage.get).toHaveBeenCalled();
-                expect(obj.localStorage.set).not.toHaveBeenCalled();
+                expect(window.localStorage.getItem(obj.namespace)).toBe(JSON.stringify(data));
             });
 
             it('check calls with data that not equal with data in localStorage', function () {
                 var emptyData = {};
 
+                obj.internalDataHandler(data);
                 obj.internalDataHandler(emptyData);
 
-                expect(obj.localStorage.get).toHaveBeenCalled();
-                expect(obj.localStorage.set).toHaveBeenCalledWith(emptyData);
+                expect(window.localStorage.getItem(obj.namespace)).toBe(JSON.stringify(emptyData));
             });
         });
         describe('"externalDataHandler" method', function () {