js本地存储怎么实现

JavaScript09

js本地存储怎么实现,第1张

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 behavior 保存数据的失效日期。

XMLDocument 获取 XML 的引用。

方法:

getAttribute() 获取指定的属性值。

load(object) 从 userData 存储区载入存储的对象数据。

removeAttribute() 移除对象的指定属性。

save(object) 将对象数据存储到一个 userData 存储区。

setAttribute() 设置指定的属性值。

localStorage

方法:

localStorage.getItem(key):获取指定key本地存储的值

localStorage.setItem(key,value):将value存储到key字段

localStorage.removeItem(key):删除指定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)

                }

            }

        }

    }

1、数据存储在用户浏览器中

2、设置、读取方便,甚至页面刷新不丢失数据

3、容量较大,sessionStorage约5M, localStorage约20M

4、只存储字符串

1、生命周期为关闭浏览器

2、在同一个窗口(页面)下数据可以共享

3、以健值对的形式存储使用

1、生命周期永久生效,除非手动删除,否则页面关闭也会存在

2、可以多页面共享

3、以健值对的形式存储使用

使用场景

可以利用localStorage来储存数据,用法也很简单:

localStorage["key"] = "要储存的数据"

提取出来也同样简单:

var x = localStorage["key"]

key是键名,可以自由设定。

需要注意的是,只有支持HTML5的浏览器才能使用localStorage