Destroy the localStorage copy of less.js client-side-generated CSS

gistfile1.js

// Destroys the localStorage copy of CSS that less.js creates

function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'

  if (!window.localStorage || !less || less.env !== 'development') {
    return;
  }
  var host = window.location.host;
  var protocol = window.location.protocol;
  var keyPrefix = protocol + '//' + host + pathToCss;
  
  for (var key in window.localStorage) {
    if (key.indexOf(keyPrefix) === 0) {
      delete window.localStorage[key];
    }
  }
}

Frustrated by less.js caching client-side CSS even after the page reloads? (Less.js persistently caches content that is @imported.)

This will destroy the cache, allowing you to retain sanity. Run it once on page-load.

Or you could just call localStorage.clear(). It clears all data stored by a domain (I think).

Yes, but that doesn't seem safe: you might be storing other stuff in localStorage you want to keep.

I am not a js guy here really, would I just put this into a script tag?

You could do that, sure. Or put it in a file with a .js extension and include it as a script tag with a src attribute pointing to the file. What I've written is just a function though; it also needs to be called once to execute, which you could do below or somewhere else. For example, if your stylesheets are in a 'css' directory off the root, call it like this:

destroyLessCache('/css/');

Ok I still can not get this to work. Here is my situation: I have my whole ftp directory on my remote server (a shared server host) mapped to a drive on my local machine. That way when I save a file on my local machine its actually just saving it via ftp. Now on my server I am working in a sub directory of the root of my subdomain ( x.xxx.net/workingdir/ ). Now in my html I have called less.js which I have modified and changed the reference to localhost with my remote server address. That was the only way to get the main less file to refresh automatically in the first place even with including the whole ( less.env = "development";
less.watch(); ). The main less file refreshes fine with this setup, but any of the imported files do not. I have included your code wrapped in separate script tags within my file and still no joy.

I should also note that if I open the file via file:///E:/x.xxx.net/ etc it all works just fine even without your code.

If you want them to refresh without reloading the page, you'll have to make this script run repeatedly, perhaps using setInterval. It should work when reloading the page though.

Thanks for this.

I just got started with Twitter Bootstrap today and immediately ran into this, so thanks! Considering how far back this has been plaguing people, I'm surprised this hasn't been addressed in the code yet, or at least in the official docs.

<script>var less = {env: "development"};</script> in head before less is included should do the trick as well right? At least it gives you the parse errors written out

@kristofferdarj, your solution worked perfectly for me - thanks :)

Alright, I feel like a dummy but I keep getting javascript erros when trying to drop that in place. Just to be completely transparent I am using WordPress, hence the lengthy path to the CSS file.
function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'

so if I change pathToCss to something like this:
function destroyLessCache('/wp-content/themes/themeName/library/css/') { // e.g. '/css/' or '/stylesheets/'

it throws an error saying:
Syntax error: missing formal parameter

and it points to the spot between the first ' and the /

Any ideas? if I just change it to pathToCss it works fine and doesn't throw the error but it doesn't clear out localstorage

Strangely, Google Chrome seems to aggressively cache the Less files even with { env: "development" } set. @jenwachter and I have had no luck figuring out why.

I'm with the same problem in the Chrome! After the version 29 update, this script stopped working.
For now, I disabled the cache of Chrome: Devtools > General> Disable cache

Anyone have a better solution than this? I'm running chrome with the cache disabled, but ideally the development environment should work as expected.

I've tried this code, but my template still using the less files. The error shown "Uncaught ReferenceError: less is not defined". Anyone can help? It is frustating hahaha~

I've included this modified / improved version:
https://gist.github.com/nezzario/8c96eb0cbfce280e6bf6

In my project here:
http://www.github.com/nezzario/kickoff

Thanks a ton for this!