Question

我正在使用基于js和html（当然）的离线网站，因此通过file:// protocol提供服务。

在网站上可以选择标记项目并将其添加到列表中（例如＆＃34; cart＆＃34;）。如果是在线版本 - 我会使用cookies和ajax / php。由于我无法使用Cookie（HTTP协议），因此我找到了符合我要求的localStorage对象。

然而，似乎localStorage并未真正使用file：//协议在IE上工作，而在Chrome上它确实如此。（就像没有足够的理由讨厌IE）。这就是我的localStorage替代/后备之旅的开始。

我的后备是使用window.name到store data。

我的代码：

//Modernizr approach - is localStorage being supported?
function supportLocalStorage(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

$(document).ready(function(){
    if(supportLocalStorage() !== true){
        alert("boo"); 
        var localStorage = {
            getItem: function (key) {
                if(window.name == null || window.name == "")
                    return "{}"; //Later i'm about to use JSON Parser.
                return window.name;
            },
            setItem: function (key, val) {
                window.name = val;
            }
        }

    }

    var products_list = localStorage.getItem("products");
}

但现在似乎在IE上一切正常（没有错误），但在Chrome上它会出现以下错误:(与var products_list行有关）

未捕获的TypeError：无法读取属性＆＃39; getItem＆＃39;未定义的

如果我删除localStorage = {..的类声明代码块，它在Chrome上再次运行，但在IE上则不行。为什么会这样？我错过了什么吗？

任何建议/提示/帮助将不胜感激。

Answer 1

在localStorage内声明的if var hoisted位于函数顶部，shadowed为全局localStorage变量。

对此的一个解决方案可能是将本地localStorage设置为顶部的全局值：

$(document).ready(function(){
    var localStorage = window.localStorage;
    if(supportLocalStorage() !== true){
        alert("boo"); 
        localStorage = {
            getItem: function (key) {
                if(window.name == null || window.name == "")
                    return "{}"; //Later i'm about to use JSON Parser.
                return window.name;
            },
            setItem: function (key, val) {
                window.name = val;
            }
        }

    }

    var products_list = localStorage.getItem("products");
}

localStorage对file：//协议的后备尝试

1 个答案: