WebSql本地存储-1009

最新推荐文章于 2022-06-15 10:24:50 发布

原创最新推荐文章于 2022-06-15 10:24:50 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #本地存储

Java学习专栏收录该内容

79 篇文章

订阅专栏

本文通过实例演示了WebSQL数据库的创建、数据增删改查操作及错误处理，并对比展示了LocalStorage的基本读写与监听功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSql本地存储练习</title>


</head>
<body>
<div id="div1">



</div>



</body>
<script src="js/vue.js"></script>
<script>





    var localdb1=window.openDatabase("mystore.db","1.0","mydb1",20000);

    // _id INTEGER PRIMARY KEY AUTOINCREMENT,
    localdb1.transaction(function (tr){
        // tr.executeSql("create table goods(_id  INTEGER PRIMARY KEY AUTOINCREMENT,name text,age Integer)");

        // _id  INTEGER PRIMARY KEY AUTOINCREMENT,

        tr.executeSql("create table goods2(name text,price Number)");

    });

    localdb1.transaction(function (tr) {
        // tr.executeSql("insert into goods(name,age) values (?,?)",["赵6","20"]);

        tr.executeSql("insert into goods2(name,price) values (?,?)",["华为P20","2399.99"]);
    });


    localdb1.transaction(function (tr) {
        tr.executeSql("delete from goods2 where _id=2");
    });


    localdb1.transaction(function (tr) {
       tr.executeSql("update goods2 set name='赵二狗' where _id=1 ")
    });

    localdb1.transaction(function (tr) {
        tr.executeSql("select * from goods2 ",[],
            function (tr,resultSet) {
                for (var i=0;i<resultSet.rows.length;i++){

                    document.write(resultSet.rows.item(i)["_id"]+".");

                    document.write(resultSet.rows.item(i)["name"]);
                    document.write("&nbsp;");
                    document.write(resultSet.rows.item(i)["price"]);
                    document.write("<br>");
                }

            },
            function (tr,error) {
                alert("失败！");
            }
        )

    });






    var v1=  new Vue({
        el:'#div1',
        data: [],

        methods:{
            fn1:function(){
                console.log("fn1,clicked!");
                alert(this.message);
            },

            fn2:function(msg){
                console.log("传入的参数是:"+ msg);
                alert("传入的参数是:"+ msg);
            },


            createPerson: function(){
                this.people.push(this.newPerson);
                // 添加完newPerson对象后，重置newPerson对象
                this.newPerson = {name: '', age: 0, sex: 'Male'}
            },
            deletePerson: function(index){
                // 删一个数组元素
                this.people.splice(index,1);
            },





        }

    });




</script>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <style>
      input{
         margin: 5px;
      }
   </style>

</head>

<body>
<input type="text" /><br/>
<input type="button" value="存储数据" />
<input type="button" value="获取数据" />
<input type="button" value="删除数据" />
</body>

<script>

window.onload = function(){
   var aInput = document.getElementsByTagName('input');

   aInput[1].onclick = function(){

      window.localStorage.setItem('name',aInput[0].value);

   };
   aInput[2].onclick = function(){

      alert(window.localStorage.getItem('name'));

   };
   aInput[3].onclick = function(){
      window.localStorage.removeItem('name');

   };
   
   window.addEventListener('storage',function(ev){  //当前页面的事件不会触发
      alert(123);

      console.log( ev.key );
      console.log( ev.newValue );
      console.log( ev.oldValue );
      console.log( ev.storageArea );
      console.log( ev.url );

   },false);
   
};

</script>
</html>