在前后端分离的开发模式中less是将样式编译成css随项目一起打包的,而传统模板页面引用的less是将样式编译后动态插入到head标签中,同时保存在localStorage中,如果引用的less是加上版本号的,比如这样:
<link rel="stylesheet/less" type="text/css" href="/theme/default/static/style/style.less?cc5e3bb904cb1b4801a73aefc25625bc">
那么每次有新的版本都会生成缓存存入localStorage,久而久之会产生一大堆不必要的缓存,经测试(插入2096条数据,每条数据大概5K),目前chrome的上限是10M左右,达到上限后,同名则会替换,无法插入新的数据,而less也会报错:
failed to save "https://*.com/style.less" to local storage for caching.
所以如果在传统模版页面中使用less需要定期或通过特定条件清理缓存:
for (var key in window.localStorage) {
if (key.indexOf('.less') >= 0) {
delete window.localStorage[key];
}
}