减少CSS和本地存储问题

时间:2012-05-15 22:20:43

标签: firefox local-storage less

我正在使用LESS CSS(更确切地说是less.js),它似乎利用了LocalStorage。我在本地运行我的应用程序之前从未见过这样的错误,但现在我在每个页面显示处都显示“持续存储最大大小”,就在我的应用程序的唯一.less文件链接上方。

到目前为止,这只适用于Firefox 12.0。

有什么方法可以解决这个问题吗?

PS:主要受到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分钟执行一次存储测试(例如,在本地存储中执行最后一个时间戳)。

2 个答案:

答案 0 :(得分:1)

这是您遇到的错误的良好资源。

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

提供一些见解,localstorage只有很大的空间,你可以在每个浏览器中最大化。考虑从localstorage中删除一些数据以解决您的问题。

答案 1 :(得分:1)

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