localStorage попытка резервного копирования на файл: // протокол

Question

Я работаю над автономным сайтом, который основан на js и html (конечно), поэтому он подается через file:// protocol.

На веб-сайте есть возможность отмечать элементы и добавлять их в список (например, «корзину»). Если это была онлайн-версия, я бы использовал файлы cookie и ajax/php. Поскольку я не могу использовать файлы cookie (протокол HTTP), я нашел объект localStorage, который соответствует моим требованиям.

Однако, похоже, что localStorage на самом деле не работает на IE с файлом: // протокол, а на Chrome это делает. (Например, не хватает причин ненавидеть IE). И вот здесь начинается мое путешествие для альтернативы/резерва localStorage.

My 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

И если я удалю код объявления класса code localStorage = {.., он снова работает в Chrome, но не в IE. Почему это происходит? Я что-то упускаю?

Любое предложение/подсказка/помощь будут оценены.

Answer 1

Вашего localStorage вар объявленного внутри if является 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"); 
}