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];
    }
  }
}

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!