file:// 协议上的 localStorage 回退尝试

Question

我正在开发一个基于 js 和 html（当然）的离线网站，因此它是通过 file:// protocol.

提供服务的

在网站中，有一个选项可以标记项目并将它们添加到列表中（如 "cart"）。如果它是在线版本 - 我会使用 cookie 和 ajax/php。由于我不能使用 cookie（HTTP 协议），我找到了符合我要求的 localStorage 对象。

但是，localStorage 似乎并没有真正在使用 file:// 协议的 IE 上工作，而在 Chrome 上却可以。（就像没有足够的理由讨厌 IE）。这就是我的 localStorage alternative/fallback 之旅的起点。

我的退路是使用 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 行有关）

Uncaught TypeError: Cannot read property 'getItem' of undefined

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

任何 suggestion/tip/help 将不胜感激。

Answer 1

您在 if 中声明的 localStorage var 是 hoisted to the top of the function and it 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");
}

file:// 协议上的 localStorage 回退尝试

localStorage fallback attempt on file:// protocol

javascript

jquery

fallback

offline

local-storage