localStorage是H5的存儲方案,各大瀏覽器支持都相當不錯,唯一悲催的就是IE,這個瀏覽器界的另類總是顯得格格不入。
IE “Internet選項”->“安全”中有一個“啟動保護模式”的單選項,在選中的情況下localStorage是無法使用的,直接提示“拒絕訪問”,就算不勾選,下次打開IE時也很有可能彈出“是否啟用保護模式”的提示,此時除了做兼容沒有更好的辦法
兼容方案一:userData
userData是IE專屬的瀏覽器存儲機制,注意IE8+不支持(你說悲催不悲催)。userData的原理網上很多,就不再贅述,您可以點擊下方有參考資料查看,這里直接貼出代碼
var box = document.body || document.documentElement || document.getElementsByTagName('head')[0];
var o = document.createElement("input");
o.type = "hidden";
o.style.display = "none";
o.addBehavior("#default#userData");
box.appendChild( o );
var exDate = new Date();
exDate.setDate(exDate.getDate()+365);
o.expires = exDate.toUTCString();//設定過期時間
var FileName = "localStorageKeyCache";
var cacheName = "kv";
o.setAttribute( cacheName , data.join(",") );
o.save( FileName );
o.load( FileName );
var getData = o.getAttribute( cacheName );
if( getData ){
console.log( getData );
}
userData本質上是一個文件,因此存儲的時候需要提供文件名,然后就可以通過setAttribute設置key/value,刪除可以通過removeAttribute方法,不管對userData做什么修改最后都需要通過save()方法進行保存
讀取userData必須先用load()方法加載文件,然后用getAttribute獲取
由於userData僅支持IE8以下的瀏覽器,IE9,10,11就的另想辦法
兼容方案二:cookie
cookie一直都是localStorage兜底的辦法,不管哪個版本的IE都支持,只可惜存儲的數據少了點。cookie存儲數據網上很多教程,這里不再贅述
總結:
localStorage兼容,簡單的就直接判斷能用就用,不行就用cookie,個人感覺userData實在雞肋,直接用cookie更方便
參考資料:
http://www.cnblogs.com/xiaohuochai/p/6595959.html
http://www.cnblogs.com/QLeelulu/archive/2008/03/29/1129322.html
http://blog.csdn.net/csyuyaoxiadn/article/details/12836955
