HTML5本地数据库写留言版功能

最新推荐文章于 2022-06-21 13:53:50 发布

sweetllh

最新推荐文章于 2022-06-21 13:53:50 发布

阅读量2.7k

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/76408496

版权

html5 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何利用HTML5的Web Storage技术，包括localStorage和sessionStorage，实现网页本地存储，创建一个简单的留言版应用。通过本地存储用户输入的数据，即使页面刷新，留言信息也能得以保留，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width:300px;
                height:200px;
                border:1px solid #000;
            }
            .text{
                width:100%;
                height:20px;
                border:1px dashed #ccc;
            }
            .time{
                width:60px;
                height:20px;
                float: right;
                background:#ccc;
            }
        </style>
    </head>
    <body>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <input type="button"  value="发布" id="block"/>
        <input type="button" value="删除" id="delete"/>
        <div id="box">
            <!--<p class="text">雨天</p>
            <p class="time">04.21</p>-->
        </div>
    </body>
    <script type="text/javascript">
        var oTxt=document.getElementsByTagName('textarea')[0];
        var oBox=document.getElementById('box');
        var oBK=document.getElementById('block');
        var oDE=document.getElementById('delete');
        var arr=[];

        var db=openDatabase('mydb','1.0','textlyb',1024*1024);

        db.transaction(function (contex){
            contex.executeSql('create table if not exists liuyanban(content)');
        })

        //页面加载完后显示所有数据
        db.transaction(function (contex){
            contex.executeSql('select * from liuyanban',[],function(con,data){
                var len=data.rows.length,i;
                for(var i=0;i<len;i++){
                    arr.push(data.rows.item(i).content);
                }
                for(var i=0;i<len;i++){
                    var aP=document.createElement('p');
                    aP.innerHTML=data.rows.item(i).content;
                    oBox.appendChild(aP);
                }
            })
        })

        oBK.onclick=function(){
            //判断当输入框不为空时，插入数据
            if(oTxt.value){
                db.transaction(function (contex){
                    contex.executeSql('insert into liuyanban(content) values("'+oTxt.value+'")');
                    //每次输入之后清空
                    oTxt.value='';
                })

                //逐条添加数据
                db.transaction(function (contex){
                    contex.executeSql('select * from liuyanban',[],function(con,data){
                        var len=data.rows.length,i;
                        arr.push(data.rows.item(len-1).content);
                        var aP=document.createElement('p');
                        aP.innerHTML=data.rows.item(len-1).content;
                        oBox.appendChild(aP);
                    })
                })
            }
        }

        //删除数据
        oDE.onclick=function(){
            db.transaction(function (contex){
                contex.executeSql('delete from liuyanban');
                location.reload();
            })
        }
    </script>
</html>