跨瀏覽器的本地存儲多種方式,例如:
1、localStorage:只支持IE8+、FireFox、Chrome、Opera等,不支持IE8以下的瀏覽器。
2、瀏覽器Cookie:支持的數據存儲量相對較少,每個domain最多只能有20條cookie,每個cookie長度不能超過4KB,否則會被截掉,有些瀏覽器甚至不支持;同時,Cookie存在安全性問題,如果cookie被人攔截了,就可以取得所有的session信息。
3、可以在頁面上嵌一個隱藏的Flash,然后使用Flash的Flash SharedObject,它基本上不會有兼容性問題,只有要額外的引入Flash和JS,但這樣會增加頁面負擔。
4、User Data: 是微軟為IE專門在系統中開辟的一塊存儲空間(這個支持所有IE瀏覽器),只支持Windows+IE的組合(單個文件的大小限制是128KB,一個域名下總共可以保存1024KB的文件,文件個數應該沒有限制。在受限站點里這兩個值分別是64KB和640KB。)
綜上,我們可以用以localStorage+User Data結合的方式來作為本地存儲的解決方案:
(function (window) { window.localDataStore = { hname: location.hostname ? location.hostname : 'localStatus', isLocalStorage: window.localStorage ? true : false, dataDom: null, initDom: function () { if (!this.dataDom) { try { this.dataDom = document.createElement('input'); this.dataDom.type = 'hidden'; this.dataDom.style.display = "none"; this.dataDom.addBehavior('#default#userData'); document.body.appendChild(this.dataDom); var exDate = new Date(); exDate = exDate.getDate() + 30; this.dataDom.expires = exDate.toUTCString(); } catch (ex) { return false; } } return true; }, set: function (key, value) { if (this.isLocalStorage) { window.localStorage.setItem(key, value); } else { if (this.initDom()) { this.dataDom.load(this.hname); this.dataDom.setAttribute(key, value); this.dataDom.save(this.hname) } } }, get: function (key) { if (this.isLocalStorage) { return window.localStorage.getItem(key); } else { if (this.initDom()) { this.dataDom.load(this.hname); return this.dataDom.getAttribute(key); } } }, remove: function (key) { if (this.isLocalStorage) { localStorage.removeItem(key); } else { if (this.initDom()) { this.dataDom.load(this.hname); this.dataDom.removeAttribute(key); this.dataDom.save(this.hname) } } } } })(window);
