更少的 CSS 和本地存储问题答案

【问题标题】：Less CSS and local storage issue更少的 CSS 和本地存储问题
【发布时间】：2012-07-19 01:10:01
【问题描述】：

我正在使用 LESS CSS（更确切地说是 less.js），它似乎在后台利用了 LocalStorage。在本地运行我的应用程序时，我以前从未见过这样的错误，但现在我在每个页面显示时都得到“达到最大持久存储大小”，就在我的应用程序的唯一 .less 文件的链接上方。

到目前为止，这只发生在 Firefox 12.0 上。

有没有办法解决这个问题？

P.S.：主要受Calculating usage of localStorage space 的启发，这就是我最终做的事情（这是基于 Prototype 并依赖于自定义的琐碎 Logger 类，但这应该很容易适应您的上下文）：

"use strict";
var LocalStorageChecker = Class.create({
    testDummyKey: "__DUMMY_DATA_KEY__",
    maxIterations: 100,
    logger: new Logger("LocalStorageChecker"),
    analyzeStorage: function() {
        var result = false;
        if (Modernizr.localstorage && this._isLimitReached()) {  
            this._clear();
        }
        return result;
    },
    _isLimitReached: function() {
        var localStorage = window.localStorage;
        var count = 0;
        var limitIsReached = false;
        do {
            try {
                var previousEntry = localStorage.getItem(this.testDummyKey);
                var entry = (previousEntry == null ? "" : previousEntry) + "m";
                localStorage.setItem(this.testDummyKey, entry);
            }
            catch(e) {
                this.logger.debug("Limit exceeded after " + count + " iteration(s)");
                limitIsReached = true;
            }
        }
        while(!limitIsReached && count++ < this.maxIterations);
        localStorage.removeItem(this.testDummyKey);
        return limitIsReached;
    },
    _clear: function() {
        try {
            var localStorage = window.localStorage;
            localStorage.clear();
            this.logger.debug("Storage clear successfully performed");
        }
        catch(e) {
            this.logger.error("An error occurred during storage clear: ");
            this.logger.error(e);
        }
    }
});


document.observe("dom:loaded",function() {
    var checker = new LocalStorageChecker();
    checker.analyzeStorage();
});

P.P.S.：我还没有测量对 UI 的性能影响，但是可以创建一个装饰器并仅每 X 分钟执行一次存储测试（例如，在本地存储中执行的最后一个时间戳）。

【问题讨论】：

标签： firefox local-storage less

【解决方案1】：

这是您遇到的错误的一个很好的资源。

http://www.sitepoint.com/building-web-pages-with-local-storage/#fbid=5fFWRXrnKjZ

提供了一些见解，即 localstorage 只有这么多空间，您可以在每个浏览器中将其最大化。考虑从本地存储中删除一些数据以解决您的问题。

【讨论】：

【解决方案2】：

Less.js 持久缓存 @imported 的内容。您可以使用此脚本清除缓存的内容。使用下面的脚本，您可以调用函数destroyLessCache('/path/to/css/')，它将清除已缓存的css文件的localStorage。

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

【讨论】：