ENGCOM-3373: [Backport] #17813 - Huge "product_data_storage" in localStorage hangs the shop #19014

Author: sidolov

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

@@ -44,6 +44,14 @@ define([
         });
     });
 
+    afterEach(function () {
+        try {
+            injector.clean();
+            injector.remove();
+        } catch (e) {}
+        window.localStorage.clear();
+    });
+
     describe('Magento_Catalog/js/product/storage/data-storage', function () {
         describe('"initCustomerDataInvalidateListener" method', function () {
             it('check returned value', function () {
@@ -81,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();
             });
         });
@@ -307,13 +317,13 @@ define([
         });
         describe('"hasIdsInSentRequest" method', function () {
             var ids  = {
-                    '1': {
-                        id: '1'
-                    },
-                    '2': {
-                        id: '2'
-                    }
-                };
+                '1': {
+                    id: '1'
+                },
+                '2': {
+                    id: '2'
+                }
+            };
 
             beforeEach(function () {
                 obj.request = {

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

@@ -22,6 +22,14 @@ define([
         });
     });
 
+    afterEach(function () {
+        try {
+            injector.clean();
+            injector.remove();
+        } catch (e) {}
+        window.localStorage.clear();
+    });
+
     describe('Magento_Catalog/js/product/storage/ids-storage', function () {
         describe('"getDataFromLocalStorage" method', function () {
             it('check calls localStorage get method', function () {
@@ -33,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';
@@ -73,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 () {