js local storage solution - localStorage and userData-JS Tutorial-php.cn

js local storage solution - localStorage and userData

伊谢尔伦

Release： 2016-11-23 14:41:39

Original

940 people have browsed it

With the rapid development of WEB applications, local storage of some data has become an important requirement, and there are many implementation solutions. The most common one is cookies, which are often used by everyone, but the shortcomings of cookies are obvious. Others Solutions such as: userData for IE6 and above, globalStorage for Firefox, and local storage for Flash. Except for Flash, the others have some compatibility issues.

sessionStorage and localStorage

Web Storage actually consists of two parts: sessionStorage and localStorage.

sessionStorage is used to locally store data in a session. These data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage.

localStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.

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

Copy after login

Attributes:

expires Set or get userData behavior expiration date of saved data.

XMLDocument Gets a reference to XML.

Method:

getAttribute() Gets the specified attribute value.

load(object) loads the stored object data from the userData storage area.

removeAttribute() Removes the specified attribute of the object.

save(object) stores object data into a userData storage area.

setAttribute() Sets the specified attribute value.

localStorage

Methods:

localStorage.getItem(key): Get the value of the local storage of the specified key

localStorage.setItem(key, value): Store the value in the key field

localStorage.removeItem(key): Delete Specify the value of key locally stored

encapsulation

localData = {
    hname:location.hostname?location.hostname:&#39;localStatus&#39;,
    isLocalStorage:window.localStorage?true:false,
    dataDom:null,
    initDom:function(){ //初始化userData
        if(!this.dataDom){
            try{
                this.dataDom = document.createElement(&#39;input&#39;);//这里使用hidden的input元素
                this.dataDom.type = &#39;hidden&#39;;
                this.dataDom.style.display = "none";
                this.dataDom.addBehavior(&#39;#default#userData&#39;);//这是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)
            }
        }
    }
}

Copy after login