web storage 之留言板

浏览器支持

IE8+,Firefox 28.0+,chrome 33.0+,Safari 7.0+。

先来了解几个js的问题。

JSON.parse() 和 JSON.stringify()

parse用于从一个字符串中解析出json对象,如

var str = '{"name":"huangxiaojian","age":"23"}'

结果：

JSON.parse(str)

Object

age: "23"

name: "huangxiaojian"

__proto__: Object

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>

检索数据

第一种读取方式： 全部读取，通过循环key值输出

//读取根据key function readiocal(id) { var traget = document.getElementById(id); var msg = localStorage.getItem("message"); for(var i=0;i<localStorage.length;i++) { var key=localStorage.key(i); traget.innerHTML+=key+":"+localStorage.getItem(key)+"<br/>"; } } html部分： <input type="button" class="fl btn" value="检索数据" onclick="readiocal('iocal_msg')"> <p id="iocal_msg"> <p>

第二种读取方式： 读取根据ID 根据输入的key值 找出匹配的整条数据

//读取根据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>

输出形式的控制 通过 JSON.parse() 把字符串转化为对象。

//检索 根据输入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>