达到限制时的本地存储、限制和数据过期答案

【问题标题】：localStorage, limits and data expiration when limits are reached达到限制时的本地存储、限制和数据过期
【发布时间】：2013-12-02 02:06:38
【问题描述】：

我尝试在localStorage 中存储对象，但有时我的空间不足。

当我尝试使用 localStorage 存储对象但没有足够的存储空间时 - 有没有办法简单地删除所需的尽可能多的本地数据以释放该空间，从最旧的元素开始删除？

浏览器中是否有 API 可以让我这样做？

【问题讨论】：

这不是一个坏问题，但任何此类 API 的部分问题在于，我认为浏览器对限制的响应方式不一致。我认为其中一些会抛出错误；其他人会弹出一个对话框，询问用户是否愿意允许更多存储空间。
嗨，我赞成并编辑了您的问题，以寻求解决方案而不是“API”。如果您不喜欢编辑，请随时恢复，但我认为它澄清了一些事情。顺便说一句，好问题。
这不是您问题的答案，但我认为它可以提供帮助：stackoverflow.com/questions/13567509/…

标签： javascript

【解决方案1】：

这是我刚刚制作的一个小型概念证明。它假定当您尝试存储项目并且没有空间时引发异常。

代码有注释

var Storage = function (iden) { // a storage wrapper object
    var storage; // temp storage with variable
    if (localStorage[iden]) { // if we already did this, reuse
        storage = JSON.parse(localStorage[iden]);
    } else {
        // the queue is for the item order to find out oldest
        storage = {
            __queue: [],
            items: {}
        };
    }

    function fetch(key) {
        console.log(storage);
        return storage.items[key];
    }

    function put(key, value) {
        try {
            storage.__queue.push(key);
            storage.items[key] = value;
            localStorage[iden] = JSON.stringify(storage);
        } catch (e) { // out of space
            if (storage.__queue.length === 0) throw Exception("Too big anyway");
            var k = storage.__queue.pop();
            delete storage.items[k];
            return put(key, value); //try again after deleting
        }
    }
    return {
        put: put,
        fetch: fetch
    };
};

【讨论】：

【解决方案2】：

受@Benjamin 令人敬畏的概念证明的启发，我使用他的一些代码提出了另一种解决方案，这个函数将删除最少使用的值。例如，您有一个像 user_id 这样的值，您多次读取该值，但如果先添加此值，则在空间用完时会丢失它。

因此，此解决方案将根据使用量删除该值

var Storage = function (iden) { // a storage wrapper object
    var storage; // temp storage with variable
    if (localStorage[iden]) { // if we already did this, reuse
        storage = JSON.parse(localStorage[iden]);
    } else {
        // frequency map contains which key was hit how many times.
        storage = {
            __freq: {},
            items: {}
        };
    }

    function fetch(key) {
        storage.__freq[key]++;
        return storage.items[key];
    }

    function deleteLeastUsed(){
        var min_used = '', min_value = 0;
        var keys = Object.keys(storage._freq);

        // This will be always the first key..awesome ?
        min_used = keys.pop();
        min_value = storage.__freq[min_used];

        keys.forEach(function(key){
            if( min_value > storage.__freq[key] ){
                min_used = key;
                min_value = storage.__freq[min_used];
            }
        });

        delete storage._freq[min_used]
        delete storage.items[min_used];
    }

    function put(key, value) {
        try {
            // sets frequency to 0 if the key is over-written
            // you can use this as `touch` if you don't wanna use a value more times and wan't to free it just set it to its value
            storage.__freq[key] = 0;
            storage.items[key] = value;
            localStorage[iden] = JSON.stringify(storage);
        } catch (e) { // out of space
            if ( Object.keys(storage.__freq).length === 0) 
                throw Exception("Too big anyway");
            deleteLeastUsed();
            return put(key, value); //try again after deleting
        }
    }
    return {
        put: put,
        fetch: fetch
    };
};

此外，如果您的数据要求真的很高，您可能需要考虑切换到 IndexedDB 而不是 localStorage。 :-)

【讨论】：

【解决方案3】：

我在 google 中找到了这个：https://github.com/pamelafox/lscache 是本地存储的“memcache”库

【讨论】：