关于webSQL的总结
翟展
关于webSQL的使用总结
webSQL是浏览器自带的本地储存库之一，使用方法和Android的手机端sqLite是一样的，
用方法创库，用方法建表
//建库
let myBase = window.openDatabase("fristBase.db","1.0",null,20000);
myBase是该数据库对象：参数
数据库名称
版本号
描述文本（null）
数据库大小
创建回调（省略）
数据库创建成功，开始创表
myBase.transaction(function(tr){
tr.executeSql("create table goods(_id Integer primary key autoincrement,name text,price real)")
})
操作表
添加：
myBase.transaction(function(tr){
tr.executeSql("insert into goods(name,price) values(?,?)",[name,price])
})
删除：
myBase.transaction(function(tr){
tr.executeSql("delete * from goods where id = ?",[id])
})
修改：（没测试过）
myBase.transaction(function(tr){
tr.executeSql("update goods set name = ? , price = ? where id = ?",[name,price,id]);
})
查询：（由于查询是异步返回信息，所以，我也用一步来调用一次）
findGoods(){
let findGood =()=>new Promise(resolve=>{
myBase.transaction(function(tr){
//参数：sql语句，参数，成功回调，失败回调
tr.executeSql("select * from goods",[],
function(tr,result){
resolve(result.rows);
//这里的的result就是返回的信息，通过遍历就可以得出数据库的所有值
},
function(error){
alert(error);
});
})
})//查询方法结束
//调用一步查询方法，在回调中进行处理赋值等代码
findGood().then(
value=>{
self.GoodsList=value;
console.log(value);
})
}
删除表：
this.myBase.transaction(function(tr){
tr.executeSql("drop table goods");
})
建表：
this.myBase.transaction(function(tr){
tr.executeSql("create table goods(_id Integer primary key autoincrement,name text,price real)")
})
总结：一个浏览器是一个独立的容器，每个数据库子在其中被创建的时候都会被去个名字然后存储在本地内存中，即使电脑关闭再打开也是会继续存在的，其中每次打开一个网页窗口，假如我们把该名字的数据库和数据表在创建一遍，我们就能访问到其中的数据，如果我们不创建的话，我们是看不到其中的数据的
就是我们在A页面创建了一个数据库和表，然后放数其中，然后到了B页面打开，只有在B页面再创建该库和该表一次，我们才能访问到其中的数据。
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>
</head>
<body>
<div id="box">
<div v-for="item in msg">
<span>{{item.name}}</span>
</div>
</div>
<script>
let vm = new Vue({
el:'#box',
data:{
msg:"in",
fristSQL:null,
},
mounted:function(){
this.load();
this.findGoods("小米");
},
methods:{
load(){
//webSQL创建
this.fristSQL = window.openDatabase("myStore.db","1.0",null,20000);
//webSQL创建表
this.fristSQL.transaction(function(tr){
tr.executeSql("create table shopCar(_id Integer primary key autoincrement,name text)");
})
},
findGoods(name){
//查询方法
var findGood = () => new Promise(resolve => {
this.fristSQL.transaction(function(tr){
tr.executeSql("select * from shopCar",[],
function(tr,result){
// let num = result.rows.length;
// resolve(num);
resolve(result.rows);
},
function(error){
console.log(error);
}
)
})
})
findGood(name).then(value=>{
// alert(value);
console.log(value);
this.msg=value;
})
}
}
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="shopCar" value="小米"/>小米 <br/>
<input type="checkbox" name="shopCar" value="苹果"/>苹果 <br/>
<input type="checkbox" name="shopCar" value="诺基亚"/>诺基亚 <br/>
<input type="checkbox" name="shopCar" value="LG"/>LG <br/>
<script>
{
//webSQL创建
var fristSQL = window.openDatabase("myStore.db","1.0",null,20000);
//webSQL创建表
fristSQL.transaction(function(tr){
tr.executeSql("create table shopCar(_id Integer primary key autoincrement,name text)");
})
}
//增加方法
var addGood = function(name){
fristSQL.transaction(function(tr){
tr.executeSql("insert into shopCar(name) values(?)",[name]);
})
}
//删除方法
var deleteGood = function(name){
fristSQL.transaction(function(tr){
tr.executeSql("delete from shopCar where name = ?",[name]);
})
}
//查询方法
var findGood = name => new Promise(resolve => {
fristSQL.transaction(function(tr){
tr.executeSql("select * from shopCar where name = ?",[name],
function(tr,result){
let num = result.rows.length;
resolve(num);
},
function(error){
console.log(error);
}
)
})
})
var inputs = document.querySelectorAll("input");
//数组长度：几个字段，数组长度就是几个
var storages = new Array(inputs.length);
for(var i=0;i<inputs.length;i++){
//索引：便于修改删除
inputs[i].index = i;
inputs[i].onclick = function(){
if(this.checked){
findGood(this.value).then(
value=>{
// alert(value);
console.log(value);
if(value==0){
addGood(this.value);
}
})
}else{
deleteGood(this.value);
}
}
}
</script>
<!-- <script>
//存在的问题：如果一个页面操作后，localStorage的值为storages数组拼接后的字符串，
//假如这个页面我们已经勾选了几个值，此时localStorage中是有值的，即storages数组是有值的，
//这时我们切换到第二个页面,若然input有勾选状态，但storages数组中没有值，此时若勾选值（跟另一页面），
//则会把另一页面的localStorage干掉。那么这页面的结果将不一样
//产生时机：一般而言，一个页面是用来勾选，另一页面用来显示，不会有此问题
//若多页面都有操作，此会有此问题
//解决方案：在storage事件发生时，更新storages的值，即可两页面同步
var inputs = document.querySelectorAll("input");
//数组长度：几个字段，数组长度就是几个
var storages = new Array(inputs.length);
for(var i=0;i<inputs.length;i++){
//索引：便于修改删除
inputs[i].index = i;
inputs[i].onclick = function(){
if(this.checked){
storages[this.index] = this.value;
}else{
storages[this.index] = '';
}
// console.log(storages);
//把修改后的结果变为字符串存入storage中
window.localStorage.setItem('ck', storages.join());
}
}
//监听：另一页面监听storage变动
window.addEventListener('storage', function (ev) {
//ck为key时判断，避免其它key的干扰
if(ev.key == "ck"){
//把storage的值取出并转换为数组
var sts = ev.newValue.split(',');
//同步storages的值：取出的值，即为本页面的storages的值！
//这样在本页面勾选值时，跟另一页面storages同步
storages = sts;
// console.log(sts);
//storages与inputs的值一一对比，保存与另一页面状态一致
for(var i =0 ;i<inputs.length;i++){
inputs[i].checked = sts[i] == inputs[i].value;
// if(sts[i] == inputs[i].value){
// inputs[i].checked = true;
// } else {
// inputs[i].checked = false;
// }
}
}
},false)
</script> -->
</body>
</html>vue组件使用webSQL
<template>
<div>
<table>
<tr>
<td>ID</td>
<td>名字</td>
<td>价格</td>
</tr>
<tr v-for="(item,index) in GoodsList">
<td v-if="item._id!=null">{{item._id}}</td>
<td v-else>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
</template>
<script>
export default{
data:function(){
return{
GoodsList:[],
myBase:null,
}
},
created:function(){
// alert("jin");
this.createdBase();
this.load();
},
methods:{
createdBase(){
//webSQL创建
this.myBase = window.openDatabase("fristBase.db","1.0",null,20000);
//建表
this.myBase.transaction(function(tr){
tr.executeSql("create table goods(_id Integer primary key autoincrement,name text,price real)")
})
},
load(){
let self = this;
this.axios.get("http://192.168.1.68:8080/findGoods").then(
value=>{
//有返回，删除旧表数据
self.deleteTable();
self.createTable();
console.log(value.data);
self.GoodsList=value.data;
value.data.forEach(function(item){
self.addGoods(item.name,item.price);
})
// self.addGoods()
},
error=>{
this.findGoods();
}
)
},
findGoods(){
let self = this;
let findGood =()=>new Promise(resolve=>{
this.myBase.transaction(function(tr){
tr.executeSql("select * from goods",[],
function(tr,result){
resolve(result.rows);
// console.log(result.rows.length)
// self.GoodsList=result.rows;
// console.log(self.GoodsList);
},
function(error){
alert(error);
});
})
})
findGood().then(
value=>{
self.GoodsList=value;
console.log(value);
})
},
addGoods(name,price){
this.myBase.transaction(function(tr){
tr.executeSql("insert into goods(name,price) values(?,?)",[name,price])
})
},
deleteGoods(id){
this.myBase.transaction(function(tr){
tr.executeSql("delete * from goods where id = ?",[id])
})
},
updataGoods(){
this.myBase.transaction(function(tr){
tr.executeSql("update goods set name = ? , price = ? where id = ?",[name,price,id]);
})
},
deleteTable(){
this.myBase.transaction(function(tr){
tr.executeSql("drop table goods");
})
},
createTable(){
//建表
this.myBase.transaction(function(tr){
tr.executeSql("create table goods(_id Integer primary key autoincrement,name text,price real)")
})
}
}
}
</script>
<style>
</style>
类似资料：