标签:
IE8+,Firefox 28.0+,chrome 33.0+,Safari 7.0+。
parse用于从一个字符串中解析出json对象,如
var str = ‘{"name":"huangxiaojian","age":"23"}‘
结果:
JSON.parse(str)
stringify()用于从一个对象解析出字符串,如
var a = {a:1,b:2}
结果:
JSON.stringify(a)
"{"a":1,"b":2}"
用 web storage 做数据库检索的时候可以用用到。如果存入多个数据可以创建 object 对象,然后把所获取的value 值也就是字符串分别赋给创建的对象的自定义属性。私有的对象也受到保护。
例子1:
function iocalStorage(id) { var obj=new Object; obj.name=document.getElementById("name").value; obj.email=document.getElementById("email").value; obj.tel=document.getElementById("tel").value; obj.memo=document.getElementById("memo").value; var str=JSON.stringify(obj); localStorage.setItem(obj.name, str); alert("你好已保存"); //readiocalTwo(‘iocal_msg‘); 读取内容 //readiocalThree(‘iocal_msg‘);//检索内容 //readiocalFour(id)//检索内容 } <div class="box"> <ul> <li><span>姓名:</span> <input class="txt" type="text" id="name"></li> <li><span>EMIL:</span> <input class="txt" type="text" id="email"></li> <li><span>电话号码:</span> <input class="txt" type="text" id="tel"></li> <li><span>备注:</span> <input class="txt" type="text" id="memo"></li> </ul> <div class="bottom"> <input type="button" value="保存数据" class="btn" onclick="iocalStorage(‘iocal_input‘)"> </div> </div>
//读取根据ID function readiocalTwo(id) { var traget = document.getElementById(id); var findTxt =document.getElementById("find").value; var msg=localStorage.getItem(findTxt);//根据输入的值检索 traget.innerHTML+=msg+"<br/>"; } html: <div class="box"> <div class="jiansuo"> <span class="fl">检索:</span><input id="find" type="text" class="txt fl"> <input type="button" class="fl btn" value="检索数据" onclick="readiocal(‘iocal_msg‘)"> </div> <p id="iocal_msg"> <p> </div>
//检索 根据输入ID框的value值 function readiocalFour(id) { var traget = document.getElementById(id); traget.innerHTML=""; var findTxt =document.getElementById("find").value; var obj=localStorage.getItem(findTxt); var data=JSON.parse(obj); var reslut="姓名 "+data.name+"<br>"; reslut+="EMIl "+data.email+"<br>"; reslut+="tel "+data.tel+"<br>"; reslut+="memo "+data.memo+"<br>"; var msg=localStorage.getItem(findTxt);// traget.innerHTML+=reslut+"<br/>"; } <div class="box"> <div class="jiansuo"> <span class="fl">检索:</span><input id="find" type="text" class="txt fl"> <input type="button" class="fl btn" value="检索数据" onclick="readiocalTwo(‘iocal_msg‘)"> </div> <p id="iocal_msg"> <p> </div>
标签:
原文地址:http://www.cnblogs.com/shuijingcao/p/5347507.html