確定Web存儲是否受支持

Question

我需要驗證Web Storage API是否受支持並可用（可能會由於安全問題而禁用它）。

所以，我認爲這將足以檢查類型的sessionStorage或localStorage的是否定義與否：

if (typeof sessionStorage != 'undefined') 
{ 
    alert('sessionStorage available'); 
} 
else 
{ 
    alert('sessionStorage not available'); 
} 

不過，我在想，如果它可能是可能的類型存在，但我不會」無論如何都能夠使用Web存儲API。

備註： 我知道如果cookies被禁用並且sessionStorage或localStorage被訪問，Firefox會引發安全錯誤。

Answer 1

如此，因爲Modernizr.localstorage分別Modernizr.sessionstorage會而Firefox可能會禁用Cookie就可以使用返回true（這會導致安全錯誤）或任何其他專有（意外）行爲可能發生：我寫了我自己的webStorageEnabled函數，這似乎工作得很好。

function cookiesEnabled() 
{ 
    // generate a cookie to probe cookie access 
    document.cookie = '__cookieprobe=0;path=/'; 
    return document.cookie.indexOf('__cookieprobe') != -1; 
} 

function webStorageEnabled() 
{ 
    if (typeof webStorageEnabled.value == 'undefined') 
    { 
     try 
     { 
      localStorage.setItem('__webstorageprobe', ''); 
      localStorage.removeItem('__webstorageprobe'); 
      webStorageEnabled.value = true; 
     } 
     catch (e) { 
      webStorageEnabled.value = false; 
     } 
    } 

    return webStorageEnabled.value; 
} 


// conditional 

var storage = new function() 
{ 
    if (webStorageEnabled()) 
    { 
     return { 
      local: localStorage, 
      session: sessionStorage 
     }; 
    } 
    else 
    { 
     return { 
      local: cookiesEnabled() ? function() 
      { 
       // use cookies here 
      }() : null, 

      session: function() 
      { 
       var data = {}; 

       return { 
        clear: function() { 
         data = {}; 
        }, 

        getItem: function(key) { 
         return data[key] || null; 
        }, 

        key: function(i) 
        { 
         var index = 0; 
         for (var value in data) 
         { 
          if (index == i) 
           return value; 
          ++index; 
         } 
        }, 

        removeItem: function(key) { 
         delete data[key]; 
        }, 

        setItem: function(key, value) { 
         data[key] = value + ''; 
        } 
       }; 
      }() 
     }; 
    } 
} 

希望這對其他人也有用。

Answer 2

爲什麼不使用Modernizr庫來檢測本地存儲是否受支持？的browers之間的任何差別將被照顧你，那麼你可以使用這樣的代碼：

if (Modernizr.localstorage) { 
    // browser supports local storage 
} else { 
    // browser doesn't support local storage 
} 

Answer 3

try{ 
    ssSupport = Object.prototype.toString.call(sessionStorage) === "[object Storage]"; 
} 
catch(e){ 
    ssSupport = false; 
} 

Answer 4

我認爲你的原始代碼是正確的，不需要太過花哨。

使用KISS principle在代碼中沒有額外的依賴關係：

var storageEnabled = function() { 
    try { 
     sessionStorage.setItem('test-key','test-value'); 
     if (sessionStorage.getItem('test-key') == 'test-value'){ 
      return true; 
     } 
    } catch (e) {}; 
    return false; 
}; 

alert(storageEnabled() ? 'sessionStorage available' : 'sessionStorage not available'); 

Answer 5

我的版本（因爲IE 9在IE 8以上運行在Intranet站點被打破）。

if (typeof (Storage) != "undefined" && !!sessionStorage.getItem) { 

} 

，增加的setObject允許存儲對象更長的版本：

var sstorage; 

if (typeof (Storage) != "undefined" && !!sessionStorage.getItem) { 
    Storage.prototype.setObject = function (key, value) { 
     this.setItem(key, JSON.stringify(value)); 
    }; 

    Storage.prototype.getObject = function (key) { 
     return JSON.parse(this.getItem(key)); 
    }; 
    if (typeof sessionStorage.setObject == "function") { 
     sstorage = sessionStorage; 
    } 
    else { 
     setupOldBrowser(); 
    } 
} 
else { 
    setupOldBrowser(); 
} 


function setupOldBrowser() { 
    sstorage = {}; 
    sstorage.setObject = function (key, value) { 
     this[key] = JSON.stringify(value); 
    }; 
    sstorage.getObject = function (key) { 
     if (typeof this[key] == 'string') { 
      return JSON.parse(this[key]); 
     } 
     else { 
      return null; 
     } 
    }; 

    sstorage.removeItem = function (key) { 
     delete this[key]; 
    }; 
} 

Answer 6

這就是我做使用會話存儲（如果可用），如果不是的話，使用cookies ..

var setCookie; 
var getCookie; 

var sessionStorageSupported = 'sessionStorage' in window 
            && window['sessionStorage'] !== null; 

if (sessionStorageSupported) { 
    setCookie = function (cookieName, value) { 
     window.sessionStorage.setItem(cookieName, value); 
     return value; //you can introduce try-catch here if required 
    }; 
    getCookie = function (cookieName) { 
     return window.sessionStorage.getItem(cookieName); 
    }; 
} 
else { 
    setCookie = function (cookieName, value) { 
     $.cookie(cookieName, value); 
     return value; // null if key not present 
    }; 
    getCookie = function(cookieName) { 
     console.log("using cookies"); 
     return $.cookie(cookieName); 
    }; 
}