zoukankan      html  css  js  c++  java
  • H5本地数据库使用实例

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

    <script type="text/javascript">
    var db = openDatabase("myDataBase", "1.0", "myLocalMsg", 1024 * 1024);
    /*
    db.transaction(function(tx){
    tx.executeSql('drop table myLocalMsg');
    });
    */
    var myNowUserId = '21538'
    var myCreateData = [
    {msgId:1,isRead:0,createTime:'2019-01-01 00:00:00'},
    {msgId:2,isRead:0,createTime:'2019-01-02 00:00:00'},
    {msgId:3,isRead:0,createTime:'2019-01-03 00:00:00'},
    {msgId:4,isRead:0,createTime:'2019-01-04 00:00:00'},
    {msgId:5,isRead:0,createTime:'2019-01-05 00:00:00'},
    {msgId:6,isRead:0,createTime:'2019-01-06 00:00:00'},
    {msgId:7,isRead:0,createTime:'2019-01-07 00:00:00'},
    {msgId:9,isRead:0,createTime:'2019-01-08 00:00:00'}
    ]

    db.transaction(function(tx){
    tx.executeSql('SELECT * FROM myLocalMsg where userId=? ',
    [myNowUserId],
    function(transaction,results){
    console.log("成功查询信息打印==================================")
    myLocalMsgData = results.rows
    console.log(myLocalMsgData)
    console.log(myCreateData)
    if( myLocalMsgData.length > 0 ){
    for( var i = 0 ; i < myCreateData.length ; i++ ){ //循环判断该条信息是否应该新增
    var isAddMsg = 1
    for( var j = 0 ; j < myLocalMsgData.length ; j++ ){
    if( myCreateData[i].msgId == myLocalMsgData[j].msgId ){
    isAddMsg = 0
    }
    }
    if( isAddMsg == 1 ){
    tx.executeSql('INSERT INTO myLocalMsg (userId,msgId,isRead,createTime) VALUES (?,?,?,?)',
    [myNowUserId,myCreateData[i].msgId,myCreateData[i].isRead,myCreateData[i].createTime],
    function(transaction,results){
    console.log("插入数据成功")
    console.log(results)
    },
    function(transaction,errMsg){
    console.log("插入数据失败信息打印:")
    console.log(errMsg)
    }
    )
    }

    }
    for( var i = 0 ; i < myLocalMsgData.length ; i++ ){ //循环判断该条信息是否应该删除
    var isDeleteMsg = 1
    for( var j = 0 ; j < myCreateData.length ; j++ ){
    if( myLocalMsgData[i].msgId == myCreateData[j].msgId ){
    isDeleteMsg = 0
    }
    }
    if( isDeleteMsg == 1 ){ //删除
    console.log(myLocalMsgData[i].msgId)
    console.log(myNowUserId)
    tx.executeSql("DELETE FROM myLocalMsg WHERE msgId= ? and userId = ?",
    [myLocalMsgData[i].msgId,myNowUserId],
    function(transaction,results) {
    console.log("删除成功")
    console.log(results)
    },
    function (transaction,errMsg) {
    console.log("删除失败")
    console.log(errMsg)
    }
    )
    }
    }
    }else{
    for(var i = 0 ; i < myCreateData.length ; i++ ){
    tx.executeSql('INSERT INTO myLocalMsg (userId,msgId,isRead,createTime) VALUES (?,?,?,?)',
    [myNowUserId,myCreateData[i].msgId,myCreateData[i].isRead,myCreateData[i].createTime],
    function(transaction,results){
    console.log("插入数据成功")
    console.log(results)
    },
    function(transaction,errMsg){
    console.log("插入数据失败信息打印:")
    console.log(errMsg)
    }
    )
    }
    }
    },
    function(transaction,errMsg){
    console.log("查询失败开始创建表格")
    tx.executeSql('CREATE TABLE myLocalMsg(userId int,msgId int,isRead int,createTime date)',
    [],
    function(transaction,results){
    console.log("创建表格成功")
    for(var i = 0 ; i < myCreateData.length ; i++ ){
    tx.executeSql('INSERT INTO myLocalMsg (userId,msgId,isRead,createTime) VALUES (?,?,?,?)',
    [myNowUserId,myCreateData[i].msgId,myCreateData[i].isRead,myCreateData[i].createTime],
    function(transaction,results){
    console.log("插入数据成功")
    console.log(results)
    },
    function(transaction,errMsg){
    console.log("插入数据失败信息打印:")
    console.log(errMsg)
    }
    )
    }
    },
    function(transaction,errMsg){
    console.log("创建表格失败信息打印:")
    console.log(errMsg)
    }
    )
    })
    })


    </script>


    </body>
    </html>

  • 相关阅读:
    idea 工具 听课笔记 首页
    桌面粉笔功能.有window ink功能区开启的快捷键
    原创: idea 的maven 方式配置 开发javaWeb(idea+tomcat +maven
    Post方式 前后端分离开发postman工具首次使用心得及注意事项
    c:forEach用法
    数据结构——并查集
    PTA高精度除法
    区块链(了解)
    数据结构-堆排
    数据结构-造树计划-最小生成树
  • 原文地址:https://www.cnblogs.com/haonantong/p/10728535.html
Copyright © 2011-2022 走看看