web本地存储

原版本测试没有通过,js构造型函数不能较好地用于存储方法。

index.html:
<!DOCTYPE html>
<html>
<head>
    <title>html5db</title>
</head>
<body>
<form action="" method="post">
    <label for="username">name:</label> <input type="text" name="username" id="username"/><br/>
    <label for="password">password:</label><input type="password" name="password" id="password"/><br/>
    <label for="phone">phone:</label><input type="number" name="phone" id="phone"/><br/>
    <label for="upload">upload:</label><input type="submit" value="add" id="upload"/><br/>
</form>
<div id="showpanel">
    <table id="tableable"  border="1"></table>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>



script.js:
/**
 * Created by keejun on 13-12-16.
 */
$(document).ready(function(){

      // 初始化数据库
        var db=openDatabase("person","1.0","mydatabse",102400);
        var tableable=document.getElementById("tableable");
          //清除原有数据
           function cleardata(){
              var childlength=tableable.childNodes.length-1;
              for(var j=childlength;j>=0;j--){
                  tableable.removeChild(tableable.childNodes[j]);
              }
              console.log("cleared!")
             }
           // 获取数据在页面显示
           function fetchdata(data){
               var tr=document.createElement("tr");
               var td1=document.createElement("td");
               var td2=document.createElement("td");
               var td3=document.createElement("td");
               td1.innerHTML=data.username;
               td2.innerHTML=data.password;
               td3.innerHTML=data.phone;
               tr.appendChild(td1);
               tr.appendChild(td2);
               tr.appendChild(td3);
               var tableable=document.getElementById("tableable");
               tableable.appendChild(tr);
           }
           //执行显示数据
          function showalldata (){
               db.transaction(
                   function(tx){
                       tx.executeSql('SELECT * FROM persons',[],function(tx,rs){
                           console.log("selected all datas from table");
                             cleardata();
                           for(var i= 0;i<rs.rows.length;i++){
                               fetchdata(rs.rows.item(i));
                           }
                       },function(rs,error){
                           console.error(error.source+":"+error.message);
                       })
                   }
               )
           }
           // 插入数据表
          function insertdata(username,password,phone){
               console.log("---------------------");
               db.transaction(
                   function(tx){
                       tx.executeSql('CREATE TABLE IF NOT EXISTS persons(username TEXT,password TEXT,phone INTERGER)',[],function(tx,rs){
                           console.log("table persons already created!");
                       },function(tx,error){
                           console.log(error.source+":"+error.message);
                       });
                      tx.executeSql("INSERT INTO persons values(?,?,?)",[username,password,phone],function(tx,rs){
                          console.log("insert succssful");
                          showalldata();
                      },function(rs,error){
                          console.log("oh..cannot insert correctly");
                      })
                   }
               )
          }

   //页面执行操作
     $("#upload").click(function(event){

          var person={
              username:$("#username").val(),
              password:$("#password").val(),
              phone:$("#phone").val()
          };
         for(var index in person){
             console.log(person[index]);
         }
         insertdata(person.username,person.password,person.phone);
         event.preventDefault();
        })
    }
)



测试通过。ok!

注:index页面引用了jquery.



你可能感兴趣的:(web本地存储)