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

2016-9-7 Jon html+css

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

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

您可以修改框中代码后运行查看

标签: webSQL localStorage