WEB アプリケーションの急速な発展に伴い、一部のデータのローカル ストレージが重要な要件となり、多くの実装ソリューションが存在します。最も一般的なのは Cookie であり、誰もがよく使用しますが、Cookie の欠点は明らかです。解決策としては、IE6 以降の userData、Firefox の globalStorage、Flash のローカル ストレージなどがあります。Flash を除き、他のものには互換性の問題があります。
sessionStorage と localStorage
Web Storage は、実際には sessionStorage と localStorage の 2 つの部分で構成されます。
sessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータは、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。
localStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。
userData
構文:
XML <Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" /> HTML <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID> Scripting object .style.behavior = "url('#default#userData')" object.addBehavior ("#default#userData")
属性:
expires 保存されたデータの userData 動作の有効期限を設定または取得します。
XMLDocument XML への参照を取得します。
Method:
getAttribute() 指定された属性値を取得します。
load(object)は、格納されているオブジェクトデータをuserData格納領域からロードします。
removeAttribute() オブジェクトの指定された属性を削除します。
save(object) は、オブジェクトデータを userData ストレージ領域に保存します。
setAttribute() 指定された属性値を設定します。
localStorage
メソッド:
localStorage.getItem(key): 指定されたキーのローカルストレージの値を取得します
localStorage.setItem(key, value): キーフィールドに値を格納します
localStorage.removeItem (key): 削除 ローカルに保存されているキーの値を指定
カプセル化
localData = { hname:location.hostname?location.hostname:'localStatus', isLocalStorage:window.localStorage?true:false, dataDom:null, initDom:function(){ //初始化userData if(!this.dataDom){ try{ this.dataDom = document.createElement('input');//这里使用hidden的input元素 this.dataDom.type = 'hidden'; this.dataDom.style.display = "none"; this.dataDom.addBehavior('#default#userData');//这是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) } } } }