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

js local storage solution—localStorage and userData

黄舟

Release： 2017-02-25 13:36:11

Original

925 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. Other solutions include: userData for IE6 and above, globalStorage for Firefox, and Flash local storage. 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 Sets or gets 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

Method:

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 the value stored locally for the specified key

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

The above is the content of js local storage solution—localStorage and userData. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com) !