web前端快取之四openDatabase資料庫

阿新 • • 發佈：2019-01-12

前言

本次資料庫快取的api學習要求對資料庫操作語句有點基礎認知，如果不瞭解資料庫語句的簡單的增刪查改的話，建議觀看此篇部落格的童鞋先去小小的瞭解一下資料庫語句的增刪改查，本文也只是對資料庫表的增刪改查的基本操作的例項演示，並沒有做一些資料庫表的關聯操作，但滿足大家對前端資料快取的大多數要求。

例項演示資料庫操作的api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<!--
openDatabase與android裡面的sqlite差不多
最好的選型儲存
-->
<h1>opendatabse資料庫操作</h1>
<button id="btn-create">建立user資料表</button>
<button id="btn-insert">插入資料</button>
<button id="btn-query">查詢資料</button>
<button id="btn-update">修改資料</button>
<button  
id="btn-delete">刪除資料</button>
<button id="btn-drop">刪除user資料表</button>
<script type="text/javascript">
let findId = id => document.getElementById(id);
//模擬一條user資料
let user = {
        username: "liuqiang",
password: "123569874",
info: "beaconApp開發團隊中一員"
};
/**
     * 建立資料庫 或者此資料庫已經存在 那麼就是開啟資料庫
 
     * name: 資料庫名稱
     * version: 版本號
     * displayName: 對資料庫的描述
     * estimatedSize: 設定資料的大小
     * creationCallback: 回撥函式(可省略)
     */
let db = openDatabase("MySql", "1.0", "我的資料庫描述", 1024 * 1024);
let result = db ? "資料庫建立成功" : "資料庫建立失敗";
console.log(result);
const USER_TABLE_SQL = "create table if not exists userTable (id integer primary key autoincrement,username varchar(12)," +
        "password varchar(16),info text)";
//建立資料表
function createTable() {
        db.transaction(tx => {
            tx.executeSql(USER_TABLE_SQL, [],
(tx, result) => {
                    alert('建立user表成功:' + result);
}, (tx, error) => {
                    alert('建立user表失敗:' + error.message);
})
        })
    }

    const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";
//插入資料
function insertData(user) {
        db.transaction(tx => {
            tx.executeSql(INSERT_USER_SQL,
[user.username, user.password, user.info],
(tx, result) => {
                    alert('新增資料成功:');
}, (tx, error) => {
                    alert('新增資料失敗:' + error.message);
})
        })
    }

    const QUERY_USER_SQL = "select * from userTable";
//查詢資料
function queryData() {
        db.transaction(tx => {
            tx.executeSql(QUERY_USER_SQL, [],
(tx, result) => {
                    console.log(result);
},
(tx, error) => {
                    console.log('查詢失敗: ' + error.message)
                })
        })
    }

    const UPDATE_USER_SQL = "update userTable set password = ? where username = ?";
//修改資料
function updateData(user) {
        db.transaction(tx => {
            tx.executeSql(UPDATE_USER_SQL, [user.password, user.username],
(tx, result) => {
                    alert("修改資料成功")
                }, (tx, error) => {
                    alert("修改資料失敗:" + error.message)
                })
        })
    }

    const DELETE_USER_SQL = "delete from userTable where username = ?";
//刪除資料
function deleteData(user) {
        db.transaction(tx => {
            tx.executeSql(DELETE_USER_SQL, [user.username],
(transaction, resultSet) => {
                    alert("刪除資料成功")
                }, (transaction, error) => {
                    alert("刪除資料失敗:" + error.message)
                })
        });
}

    const DROP_USER_SQL = "drop table userTable";
//刪除資料表
function dropTable() {
        db.transaction(tx => {
            tx.executeSql(DROP_USER_SQL, [],
(transaction, resultSet) => {
                    alert("刪除資料表成功")
                }, (transaction, error) => {
                    alert("刪除資料表失敗:" + error.message)
                })
        })
    }

    /**
     * 點選事件 增刪查改
     */
let btnCreate = findId("btn-create");
let btnInsert = findId("btn-insert");
let btnQuery = findId("btn-query");
let btnUpdate = findId("btn-update");
let btnDelete = findId("btn-delete");
let btnDrop = findId("btn-drop");
btnCreate.onclick = () => createTable();
btnInsert.onclick = () => insertData(user);
btnQuery.onclick = () => queryData();
btnUpdate.onclick = () => {
        user.password = "111666666"; //修改密碼
updateData(user);
};
btnDelete.onclick = () => deleteData(user);
btnDrop.onclick = () => dropTable();
</script>
</body>
</html>

web前端快取之四openDatabase資料庫

前言本次資料庫快取的api學習要求對資料庫操作語句有點基礎認知，如果不瞭解資料庫語句的簡單的增刪查改的話，建議觀看此篇部落格的童鞋先去小小的瞭解一下資料庫語句的增刪改查，本文也只是對資料庫表的增刪改查的基本操作的例項演示，並沒有做一些資料庫表的關聯操作，但滿足大家對前端資料快

web前端快取之三sessionStorage

看了前兩篇的童鞋都知道，每個快取的api都有它的優缺點，希望大家能夠在看完這個web前端快取系列之後，能夠幫助大家在專案開發中能夠合理的使用每一個api<!DOCTYPE html> <html lang="en"> <head>

linux環境配置java web專案之四——安裝資料庫

安裝MySQL主要有兩種方法：一種是通過原始碼自行編譯安裝，這種適合高階使用者定製MySQL的特性；另一種是通過編譯過的二進位制檔案進行安裝。二進位制檔案安裝的方法又分為兩種：一種是不針對特定平臺的通用安裝方法，使用的二進位制檔案是字尾為.tar.gz的壓縮檔案；第二種是使

Web前端國際化之jQuery.i18n.properties

i18n github 環境高內聚低耦合設計 https 默認個人能力指定 Web前端國際化之jQuery.i18n.propertiesjQuery.i18n.properties介紹國際化是如今Web應用程序開發過程中的重要一環，jQuery.i

web前端優化之內容優化

找問題有效背景 pri 相關下載 data url 並行前端內容優化主要有以下幾條： 1.盡量減少http請求　　（1）合並文件，把多個css文件合並在一起；　　（2）css Sprites，把css相關的background元素進行背景圖絕對定位；　　（3）

我的IT夢——web前端開發之HTML,CSS（一）

jpg 標記語言方便 add body 前端 input cti 列表 HTML HTML全稱HyperText Markup Language（超文本標記語言）標簽成對出現 <!DOCTYPE html> 文檔類型定義 < > 標

我的web前端學習之路-HTML-form

val jpg web前端 ted cti 之路 radi pass idt 1 <form name="register" method="post" action="servlet等可處理請求的東西"> 2 單行文本框<inpu

我的web前端學習之路-CSS-引入

com imp port 之路 es2017 內嵌學習常用方式多用連接導入方式優先級：內聯>內嵌>@import方式>link方式（常用）我的web前端學習之路-CSS-引入

我的web前端學習之路-CSS-選擇器

選擇產生之路 css 註意 images nbsp 前端 ges 選擇器指定了要作用的標簽直接指定一個準確元素名，對其產生作用指定標簽元素class屬性的值，可選指定特定的標簽元素，不要忘記“點”！（註意！！）class屬性的值可以用空格隔開表示多個cla

我的web前端學習之路-CSS-字體和文本

技術你是 let cor meta round ack san one 1 <head> 2 <meta charset="utf-8"> 3 <title>css字體和文本</title> 4

我的web前端學習之路-CSS-列表和表格

表示 hang idt char rac 一個 ddr web前端 9.png list-style-image和list-style-type只能選擇一個使用 border-collapse和border-spacing不能同時使用 1 <head>

【WEB前端系列之CSS】CSS3動畫之Tranition

transform log 值變化 mozilla 大眾適應 int 處理中一前言 css中的transition允許css的屬性值在一定的時間區間內平滑的過渡。這種效果可以在鼠標點擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑的以動畫效果改變CSS的屬性值。語法

web前端自學之路

語言 web 之路不用 mce 新興是我一點原因 web前端作為一個新興的熱門職位，在今日互聯網的發展上，已經IT行業的一門新貴。現在，很多人都認識到了這個新興的職業，並且想要接觸它，但是卻是不知道怎樣下手，如何快速的入門和學習呢？前端，直白的講就是做網頁的，

進擊的Python【第十六章】：Web前端基礎之jQuery

name cat 隱藏 function wid get val 綁定 des 進擊的Python【第十六章】：Web前端基礎之jQuery 一、什麽是 jQuery ？ jQuery是一個JavaScript函數庫。 jQuery是一個輕量級的"寫的少，做的多"的Java

web前端學習之css

使用改變過多 mark tro blog css url 提高 css概述： CSS （Cascading Style Sheets）是層疊樣式表用來定義網頁的顯示效果。可以解決html代碼對樣式定義的重復，提高了後期樣式代碼的可維護性，並增強了網頁的顯示效果功能。簡單

web前端【第四篇】CSS屬性操作

idt lba adding 人的 ... charset 平鋪 cit stat 一、文本屬性 1.text-align:cnter 文本居中2.line heigth 垂直居中：行高，和高度對應3.設置圖片與文本的距離：vertical-align4.text-de

web前端基礎之BOM和DOM

js DOM BOM一、介紹JavaScript分為ECMAScript，DOM，BOM。BOM（Browser Object Model）是指瀏覽器對象模型，它使JavaScript有能力與瀏覽器進行“對話”。DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML

高效Web前端開發之路：YUI 3.15 PDF掃描版

瀏覽器瀏覽器兼容 key 掃描 data- 第6章必須第5章 HR JavaScript是一種最初由Netscape的LiveScript發展而來的面向對象的Web腳本語言，被ECMA國際定義為國際化標準——ECMAScript。JavaScript具有使用局限

Web前端開發之HTML+CSS基礎入門(框架)

AR 網頁 html 表單提交 pos 部分加載 selected area pin HTML框架詳解與框架布局? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 1)什麽是框架框架將瀏覽器劃分成不同的部分，每一部分加載不同的網頁，實現在同一

Web前端開發之HTML+CSS基礎入門(使用CSS樣式的方式)

AD 層疊樣 b前端開發 col In 基於允許 ML 語言 1) HTML<!DOCTYPE> 聲明標簽 a.定義和用法 <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。 <!DOCTYP

web前端快取之四openDatabase資料庫

相關推薦