web Storage本地存储

Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据

sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在本地

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

web Storage的API只能操作字符串

通过Web Storage开发一个简单的通讯录小程序，以演示相关API的使用方法；我们要实现如下功能：

录入联系人，联系人有姓名、手机号码2个字段，以手机号作为key存入localStorage；

根据手机号码，查找机主；列出当前已保存的所有联系人信息；

<div style="border: 2px dashed #ccc;width:320px;text-align:center;"> 
    <label for="user_name">姓名：</label> 
    <input type="text" id="user_name" name="user_name" class="text"/> 
    <br/> 
    <label for="mobilephone">手机：</label> 
    <input type="text" id="mobilephone" name="mobilephone"/> 
    <br/> 
    <input type="button" onclick="save()" value="新增记录"/> 
    <hr/> 
    <label for="search_phone">输入手机号：</label> 
    <input type="text" id="search_phone" name="search_phone"/> 
    <input type="button" onclick="find()" value="查找机主"/> 
    <p id="find_result"><br/></p> 
</div> 
<br/> 
<div id="list"> 
</div> 

js部分

//保存数据 
function save(){ 
    var mobilephone = document.getElementById("mobilephone").value; 
    var user_name = document.getElementById("user_name").value; 
    localStorage.setItem(mobilephone,user_name); 
}

//查找数据 
function find(){ 
    var search_phone = document.getElementById("search_phone").value; 
    var name = localStorage.getItem(search_phone); 
    var find_result = document.getElementById("find_result"); 
    find_result.innerHTML = search_phone + "的机主是：" + name; 
}

//将所有存储在localStorage中的对象提取出来，并展现到界面上 
function loadAll(){ 
    var list = document.getElementById("list"); 
    if(localStorage.length>0){ 
        var result = "<table border='1'>"; 
        result += "<tr><td>姓名</td><td>手机号码</td></tr>"; 
        for(var i=0;i<localStorage.length;i++){ 
            var mobilephone = localStorage.key(i); 
            var name = localStorage.getItem(mobilephone); 
            result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>"; 
        } 
        result += "</table>"; 
        list.innerHTML = result; 
    }else{ 
        list.innerHTML = "目前数据为空，赶紧开始加入联系人吧"; 
    } 
}

http://www.jb51.net/html5/70029.html