HTML5 存取Json
Html5可以通过json来存储读取一些比较复杂的对象,比如一个学生表的姓名,学号,地址,邮箱等信息,我们可以创建一个Object来包括这些信息,然后将Object对象转换为json对象存放在localStorage。
存储函数:
function save2LocalStorage(){ var tableInfo = new Object; tableInfo.name=document.getElementById("name").value; tableInfo.email=document.getElementById("email").value; tableInfo.studentID=document.getElementById("studentID").value; tableInfo.address=document.getElementById("address").value var str = JSON.stringify(tableInfo); localStorage.setItem(tableInfo.name,str); }
之后我们可以通过用户名称搜索已经存储在localStorage中的学生信息并显示在一个Element中,查询函数如下:
function findFromLocalStorage(id){ var searchName = document.getElementById("search").value; var str=localStorage.getItem(searchName); var tableInfo= JSON.parse(str); var result="姓名:"+tableInfo.name+'<br>'; result+="邮箱:"+tableInfo.email+'<br>'; result+="学号:"+tableInfo.studentID+'<br>'; result+="住址:"+tableInfo.address+'<br>'; var target = document.getElementById(id); target.innerHTML = result; }
在这里面Json的序列化和解析用到的douglascrockford 开源脚本。
相关效果如下: