js lokale Speicherlösung – localStorage und userData

Mit der rasanten Entwicklung von WEB-Anwendungen ist die lokale Speicherung einiger Daten zu einer wichtigen Anforderung geworden, und es gibt viele Implementierungslösungen. Die häufigste davon sind Cookies, die häufig von allen verwendet werden, aber die Mängel von Cookies liegen auf der Hand Zu den anderen Lösungen gehören userData für IE6 und höher, globalStorage für Firefox und Flash-Lokalspeicher. Mit Ausnahme von Flash weisen die anderen einige Kompatibilitätsprobleme auf.

sessionStorage und localStorage

Web Storage besteht eigentlich aus zwei Teilen: sessionStorage und localStorage.

sessionStorage wird zum lokalen Speichern von Daten in einer Sitzung verwendet. Auf diese Daten kann nur von Seiten in derselben Sitzung zugegriffen werden und die Daten werden zerstört, wenn die Sitzung endet. Daher handelt es sich bei sessionStorage nicht um einen dauerhaften lokalen Speicher, sondern nur um einen Speicher auf Sitzungsebene.

localStorage wird für die dauerhafte lokale Speicherung verwendet, sofern die Daten nicht aktiv gelöscht werden.

userData

Syntax:

XML  <Prefix: CustomTag ID=sID STYLE="behavior:url(&#39;#default#userData&#39;)" />
HTML  <ELEMENT STYLE="behavior:url(&#39;#default#userData&#39;)" ID=sID>
Scripting    object .style.behavior = "url(&#39;#default#userData&#39;)"
object.addBehavior ("#default#userData")

Attribute:

expires Setzt oder ruft das Ablaufdatum des Benutzerdatenverhaltens der gespeicherten Daten ab.

XMLDocument Ruft einen Verweis auf XML ab.

Methode:

getAttribute() Ruft den angegebenen Attributwert ab.

load(object) lädt die gespeicherten Objektdaten aus dem userData-Speicherbereich.

removeAttribute() Entfernt das angegebene Attribut des Objekts.

save(object) Speichert Objektdaten in einem userData-Speicherbereich.

setAttribute() setzt den angegebenen Attributwert.

localStorage

Methode:

localStorage.getItem(key): Ruft den Wert des lokalen Speichers des angegebenen Schlüssels ab

localStorage.setItem(key , Wert): Speichern Sie den Wert im Schlüsselfeld

localStorage.removeItem(key): Löschen Sie den lokal durch den angegebenen Schlüssel gespeicherten Wert

Encapsulation

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)
            }
        }
    }
}