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 开源脚本。

相关效果如下：

完整代码