使用html5 webSQL + localStorage 实现本地留言板功能

2016-9-7 Jon
使用html5 webSQL + localStorage 实现本地留言板功能

<br />
    <!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
  <meta charset="UTF-8"><br />
  <title>使用html5 webSQL + localStorage 实现本地留言板功能</title><br />
  <meta name="renderer" content="webkit"><br />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"><br />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><br />
  <link rel="stylesheet" href="https://yuanqiao.pw/yqiao/static/css/mygbook.css"><br />
</head><br />
<body><br />
  <header><h1>人过留名，雁过留声</h1></header><br />
  <div class="guest-book"><br />
    <div class="guest-form"><br />
      <form id="submit-form"><br />
        <div class="clearfix form-group"><br />
          <label for="user-name" class="left">您的大名：</label><br />
          <div class="right"><br />
            <input type="text" name="userName" id="user-name" placeholder="留下姓名" required><br />
          </div><br />
        </div><br />
        <div class="clearfix form-group"><br />
          <label for="user-message" class="left">您的高论：</label><br />
          <div class="right" id="textarea1"><br />
          </div><br />
        </div><br />
        <div class="clearfix form-group"><button type="submit" id="gbook-submit">走一个</button></div><br />
      </form><br />
    </div><br />
    <ul class="guest-data" id="message-list"><br />
    </ul><br />
  </div><br />
  <div class="modify-popup"><br />
    <div class="shade"></div><br />
    <form id="modify-form"><br />
      <div class="clearfix form-group"><br />
        <label for="user-name" class="left">您的大名：</label><br />
        <div class="right"><br />
          <input type="text" name="userName" id="edit-name" placeholder="留下姓名" required><br />
        </div><br />
      </div><br />
      <div class="clearfix form-group"><br />
        <label for="user-message" class="left">您的高论：</label><br />
        <div class="right" id="textarea2"><br />
        </div><br />
      </div><br />
      <input type="hidden" id="edit-gid"><br />
      <div class="clearfix form-group"><button type="submit" id="gbook-submit">走一个</button></div><br />
    </form><br />
  </div><br />
  <footer><h1>版权所有 @yuanqiao 2016</h1></footer><br />
  <!-- 脚本文件部分 --><br />
  <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><br />
  <script><br />
    // 补全残缺html代码<br />
    $('#textarea1').html('<textarea name="userMessage" id="user-message" rows="3" placeholder="别说你不知道写什么。。。" required></'+'textarea>');<br />
    $('#textarea2').html('<textarea name="userMessage" id="edit-message" rows="3" placeholder="别说你不知道写什么。。。" required></'+'textarea>');<br />
    /*<br />
      接收一个字符串或者数字，如果这个字符串小于10 则前面加个0<br />
    */<br />
    function getTwoDigit(o){return o<10?'0'+o:o;}<br />
    // 获取时分秒的方法<br />
    function getDates(){<br />
      var date = new Date();<br />
      var hour = date.getHours();<br />
      var minu = date.getMinutes();<br />
      var seco = date.getSeconds();<br />
      return getTwoDigit(hour)+':'+getTwoDigit(minu)+':'+getTwoDigit(seco);<br />
    }<br />
    // 判断浏览器是否支持 localStorage<br />
    if(window.localStorage){<br />
      console.log('浏览器支持localStorage');<br />
      var storage = window.localStorage;<br />
      if (storage.getItem('uname')) $('#user-name').val(storage.getItem('uname'));<br />
    }<br />
    // 本地存储 打开或者创建数据库<br />
    var db = openDatabase('Guestbook', '1.0', '留言所用的数据库', 5 * 1024 * 1024);<br />
    // 判断浏览器支持<br />
    if(db){<br />
      console.log('该浏览器支持 WEB SQL');<br />
    }else{<br />
      alert('该浏览器不支持 web sql，请更换浏览器重试');<br />
    }<br />
    var messageList = $('#message-list');<br />
    // 新增数据<br />
    $('#submit-form').on('submit',function(){<br />
      var uname = $('#user-name').val();<br />
      var utxt = $('#user-message').val();<br />
      storage.setItem('uname',uname);<br />
      db.transaction(function (context) {<br />
        context.executeSql('INSERT INTO message(gid, uname, time, content) VALUES(?,?,?,?)',[new Date().getTime().toString(),uname,getDates(),utxt]);<br />
      });<br />
      $('#user-message').val('');<br />
      // messageList.prepend();<br />
      showList();<br />
      return false;<br />
    });<br />
    // 没有则创建表，并且查询显示所有数据<br />
    db.transaction(function (context) {<br />
      context.executeSql('CREATE TABLE IF NOT EXISTS message(id unique, gid, uname, time, content)');<br />
      showList();<br />
    });<br />
    function showList(){<br />
      db.transaction(function (context) {<br />
        context.executeSql('select * from message order by gid desc', [], function (context, results) {<br />
          var len = results.rows.length, i, result='';<br />
          for (i = 0; i < len; i++){<br />
            result += '<li class="clearfix">'+<br />
                      '  <div class="avatar">'+<br />
                      '    <img src="http://placehold.it/50x50" alt="">'+<br />
                      '  </div>'+<br />
                      '  <div class="data">'+<br />
                      '    <div class="name">'+results.rows.item(i).uname+'</div>'+<br />
                      '    <div>'+results.rows.item(i).content+'</div>'+<br />
                      '    <div class="time">'+results.rows.item(i).time+'</div>'+<br />
                      '  </div>'+<br />
                      '  <div class="operate">'+<br />
                      '    <a href="javascript:;" class="remove-this" data-id="'+results.rows.item(i).gid+'">删除</a>'+<br />
                      '    <a href="javascript:;" class="edit-this" data-id="'+results.rows.item(i).gid+'">修改</a>'+<br />
                      '  </div>'+<br />
                      '</li>';<br />
          }<br />
          messageList.html(result);<br />
        });<br />
      });<br />
    }<br />
    // 删除数据<br />
    $('.guest-data').on('click','.remove-this',function(){<br />
      var _this = $(this);<br />
      var id = _this.attr('data-id');<br />
      if(confirm('确认删除吗?')){<br />
        db.transaction(function (context) {<br />
          context.executeSql('DELETE FROM message where gid=?',[id],function(tx, rs){<br />
            _this.parent().parent().remove();<br />
          });<br />
        });<br />
      }<br />
    });<br />
    // 修改<br />
    var editName = $('#edit-name');<br />
    // var editMessage = $('#edit-message');<br />
    var editGid = $('#edit-gid');<br />
    var modifyPopup = $('.modify-popup');<br />
    $('.guest-data').on('click','.edit-this',function(){<br />
      modifyPopup.fadeIn(200);<br />
      var gid = $(this).attr('data-id');<br />
      db.transaction(function (context) {<br />
        context.executeSql('select * from message WHERE gid=?',[gid],function(tx, result){<br />
          console.log(result);<br />
          editName.val(result.rows.item(0).uname);<br />
          $('#edit-message').val(result.rows.item(0).content);<br />
          editGid.val(gid);<br />
        });<br />
      });<br />
    });<br />
    // 修改提交<br />
    $('#modify-form').on('submit',function(){<br />
      var uname = editName.val();<br />
      var utxt = $('#edit-message').val();<br />
      var gid = editGid.val();<br />
      storage.setItem('uname',uname);<br />
      db.transaction(function (context) {<br />
        context.executeSql('UPDATE message SET uname=?,content=? WHERE gid=?',[uname,utxt,gid],function(tx, result){<br />
          modifyPopup.fadeOut(200);<br />
          showList();<br />
        });<br />
      });<br />
      return false;<br />
    });<br />
    // 关闭修改弹窗<br />
    $('.shade').on('click',function(){<br />
      modifyPopup.fadeOut(200);<br />
    });<br />
    /*<br />
      清空表数据：<br />
        context.executeSql('DELETE FROM message');<br />
      删除数据表：<br />
        context.executeSql('drop table message');<br />
      web sql w3c已不推荐使用，这里权当做学习<br />
      使用 localStorage 记录用户名<br />
      localStorage的基本使用<br />
      // var name = localStorage.setItem("myname","yuanzm");<br />
      // localStorage.removeItem('myname');<br />
      // alert(localStorage.getItem("myname"));<br />
    */<br />
  </script><br />
</body><br />
</html><br />
您可以修改框中代码后运行查看