3

In Magento 2 when we open multiple products it stores data of those products into window.localStorage.product_data_storage locally into the browser, In many of the browser that data get deleted automatically but in some of the browsers it is not getting deleted.

I do have to say I opened about 200 products before this happened, but it is never clear.

When we clear the cache of browser then it is removing that data from browser, but it is simply understood that the end user will not go to clear their cache every time so How we can remove this content from their browser?

Any Help will be appreciated

Thank You!

3

As of I understood that you wanted to remove the content from browser that Magento stores locally into every browser when you/anyone opens your site to use them at some places for example to maintain the component of knock-out js in magento like in checkout page, mini-cart, etc.

Here I have created a module to achieve this, with this module you can manage that how much content should be stored into the browsers local storage. Means the magento will store the content into local storage of browser but like if you want that data should be get deleted when the limit riches to 10-20 whatever the unit you wish Then the module will delete the content from the browser & magento will again start storing data to the local from 1 count to your desired limit.

Create a module at below location

Magento_root/app/code/{VendorName}/{ModuleName}

Create below files into it at the appropriate given location.

  1. registration.php
  2. etc/module.xml
  3. view/frontend/layout/catalog_product_view.xml
  4. view/frontend/templates/product/view/removelocal.phtml
  5. view/frontend/web/js/removelocal.js

Here I am not putting the content of registration.php & module.xml assuming that it is already understood to you. For this answer I am taking the VendorName => Vendorname & the ModuelName => Removelocal. Here is the code of custom module.

catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="vendorname.removelocal.content" template="Vendorname_Removelocal::product/view/removelocal.phtml" before="-" />
        </referenceContainer>
    </body>
</page>

removelocal.phtml

<div class="swatch-opt" data-role="remov-local-content"></div>
<script type="text/x-magento-init">
    {
        "[data-role=remov-local-content]": {
            "Vendorname_Removelocal/js/removelocal": {

            }
        }
    }
</script>

removelocal.js

define([
    'jquery'
], function ($){
    'use strict';
    $.widget('mage.removelocal', {

        _init: function () {

            if(window.localStorage.product_data_storage)
            {
                var temp = window.localStorage.product_data_storage;
                var myObject = JSON.parse(window.localStorage.product_data_storage);
                var count = Object.keys(myObject).length;

                if(count >= 10){
                    window.localStorage.removeItem('product_data_storage');
                }
            }
        }
    });
    return $.mage.removelocal;
});

Note: After completing please do run the below command.

php bin/magento module:enable Vendorname_Removelocal
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
1

Inject Magento\Framework\App\Cache\TypeListInterface and Magento\Framework\App\Cache\Frontend\Pool in your constructor

public function __construct(
    Context $context,
    \Magento\Framework\App\Cache\TypeListInterface $cacheTypeList,
    \Magento\Framework\App\Cache\Frontend\Pool $cacheFrontendPool
) {
    parent::__construct($context);
    $this->_cacheTypeList = $cacheTypeList;
    $this->_cacheFrontendPool = $cacheFrontendPool;
}

Then, add this below code in that method where you want to clear cache

$types = array('config','layout','block_html','collections','reflection','db_ddl','eav','config_integration','config_integration_api','full_page','translate','config_webservice');
foreach ($types as $type) {
    $this->_cacheTypeList->cleanType($type);
}
foreach ($this->_cacheFrontendPool as $cacheFrontend) {
    $cacheFrontend->getBackend()->clean();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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