localStorage用于本地存储

localStorage对象是HTML5的客户端存储持久化数据的方案。为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

localStorage是Storage类型的实例。有以下的几种方法：

①clear（）：删除所有值。

②getItem（name）：根据指定的名字name获取对应的值

③key(index)：在指定的数字位置获取该位置的名字。

④removeItem（name）：删除由name指定的名值对

⑤setItem(name,value)：为指定名字设置一个对应的值

localStorage对象可以通过点号调用这些方法。

例：使用方法来存储数据

localStorage.setItem("name","songyuhua");//这样就用localStorage存储了一个名字为name的数据，数据的内容为 “songyuhua"

使用方法来读取数据

localStorage.getItem("name");//这样就读取了名字为“name”的数据的值。

原作者写了一个localStorage的实例，源码下载地址为：http://download.csdn.net/detail/mayixixi/4374857

这个页面的主要功能是：记录一些你需要完成的事情，如果已经完成了，则选中，如果没有完成则不选中。使用localStorage可以使你在再次加载页面的时候依然保持你当时的情况。

存储数据的过程：

[javascript]view
plain copy

function storage()//localStorage用于客户端存储  

{//将ul的键值对存储在localStorage中  

    localStorage.clear();//清除以前存储在localStorage中的内容  

    var storageArr=[];//建立一个数组，用于保存对象  

    for(var i=0;i<ul.children.length;i++)//遍历ul  

    {  

        var obj={};  

        if(ul.children[i].children[0].type == "checkbox")  

        {  

            obj.checked=ul.children[i].children[0].checked;//保存复选框是否选中  

            obj.txt=ul.children[i].getElementsByTagName("span")[0].innerText;//保存要做的事情的内容  

            storageArr.push(obj);//将对象加入数组  

        }  

    }  

    localStorage.setItem("ulStroage", JSON.stringify(storageArr));  

    if(toggleAll.checked == true)  

    {  

        localStorage.setItem("toggleAll","checked");//新建立一个项，用于保存全选框的值  

    }  

    else  

    {  

        localStorage.setItem("toggleAll","");  

    }  

}

数据读取的过程

[javascript]view
plain copy

window.onload=function()  

{  

    var storageArr=JSON.parse(localStorage.getItem("ulStroage"));//将数据读出，放在一个数组中  

    var localToggle=localStorage.getItem("toggleAll");//将全选框的值读出  

    if(storageArr.length>0){  

        toggleAll.checked=localToggle;  

        for(var i=0;i<storageArr.length;i++)  

        {  

            addLi(storageArr[i].checked,storageArr[i].txt);   

        }  

    }  

}

localStorage用于本地存储

相关推荐