WebSql本地存储-1009

最新推荐文章于 2021-05-17 17:38:46 发布

Golden_soft

最新推荐文章于 2021-05-17 17:38:46 发布

阅读量217

点赞数

分类专栏： Java学习文章标签： web 本地存储

本文链接：https://blog.csdn.net/Golden_soft/article/details/82996692

版权

Java学习专栏收录该内容

79 篇文章 1 订阅

订阅专栏

<!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>

Golden_soft

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebSql本地存储-1009

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;WebSql本地存储练习&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt
复制链接

扫一扫