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；

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

 
    姓名： 
     
    
 
    手机： 
     
    
 
     
    
 
    输入手机号： 
     
     
    

 
 

 
 
 

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 = ""; 
        result += ""; 
        for(var i=0;i"; 
        } 
        result += "
姓名
手机号码
"+mobilephone+"
"; 
        list.innerHTML = result; 
    }else{ 
        list.innerHTML = "目前数据为空，赶紧开始加入联系人吧"; 
    } 
}

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