Clearing Custom Modules from the Divi Builder Cache

For developers of custom Divi builder modules, here's a quick tip that may save you some hassle along the way. Divi Builder caches modules in the browser's local storage to improve performance. However, as a custom module developer, you may find that changes you make to your modules don't show up during testing – you keep seeing the old cached version. Worse yet, you may try to update the plugin for your users and find that they can't see your new changes. To avoid this, you can simply clear your module from the cache at the appropriate times.

Divi developer Jonathan Bossenger first raised my awareness of this in his post on the Divi Builder cache.

In the post, he offers a code snippet for clearing the cache:

for(var prop in localStorage)localStorage.removeItem(prop);
Jonathan advises that this JavaScript be manually entered via the JavaScript console, and he also provides it in a plugin form that can be installed on your test site. The plugin runs on each page load and will effectively disable the browser's local storage by clearing the cache on each page load.
This is great, but there are a couple of refinements that I think are useful. The first is to clear only the specific module you are working on – this avoids any potential interference with other modules, etc. The second is to actually incorporate the cache clearing code into your plugin and having it run when the user updates the module. This ensures that your changes are immediately visible to the user after updating.

Here is a bit of template code for doing so:

// Config

$debug = true;
$current_version = '1.1';
$slug = 'et_pb_my_custom_module';
$version_option_name = 'my_plugin_version';

if (is_admin()) {

	// Check if plugin updated

	$old_version = get_option($version_option_name);

	if ($old_version != $current_version) { 
		$updated = true; 
		update_option($version_option_name, $current_version); // Update the stored version number
	} else {
		$upgraded = false;
	}

	// Clear module from cache if necessary

	if ($debug or $upgraded) { 
		add_action('admin_head', 'remove_from_local_storage');
	}
}
				
function remove_from_local_storage() { 
	global $slug;
	echo "<script>localStorage.removeItem('et_pb_templates_".esc_attr($slug)."');</script>";
}
Please note that I pulled this out of my own custom plugin code, but that I haven't fully tested it in its current form, so please make sure you do and let me know if you spot any errors in it.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

  1. Browser console just responds with "undefined" and no change to the cache

    Reply
    • I believe the localstorage is only used by the classic builder (which was the main builder at the time the post was written), so if you're using one of the visual builders, I wouldn't expect any change in the cache. Also, the console responds with "undefined" even when it the code has deleted items from localstorage, so I wouldn't use that as an indicator of success. If you open the debug tools in Google Chrome and go to Application > Storage > Local Storage, you should be able to view the local storage for your domain. That will let you see if there are templates for each Divi module, and if they are deleted by the code. I hope that helps, but if the code still isn't deleting the templates, please let me know. Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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