web storage 之留言板

Posted 2020-07-03 水晶草

浏览器支持

 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

1. age: "23"
2. name: "huangxiaojian"
3. __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>