码迷,mamicode.com
首页 > Web开发 > 详细

web storage 之留言板

时间:2016-04-02 14:46:48      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

浏览器支持

 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>

 

 

 

web storage 之留言板

标签:

原文地址:http://www.cnblogs.com/shuijingcao/p/5347507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!