WEB SQL数据库本地存储例子

使用HTML5自带的WEB SQL数据库来进行本地化存储

h5, database

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1557
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
    var dbSize = 5 * 1024 * 1024; // 5MB
    html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}

html5rocks.webdb.createTable = function() {
    var db = html5rocks.webdb.db;
    db.transaction(function(tx) {
        tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
    });
}

html5rocks.webdb.addTodo = function(todoText) {
    var db = html5rocks.webdb.db;
    db.transaction(function(tx) {
        var addedOn = new Date();
        tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)", [todoText, addedOn],
            html5rocks.webdb.onSuccess,
            html5rocks.webdb.onError);
    });
}

html5rocks.webdb.onError = function(tx, e) {
    alert("There has been an error: " + e.message);
}

html5rocks.webdb.onSuccess = function(tx, r) {
    // re-render the data.
    html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
    var db = html5rocks.webdb.db;
    db.transaction(function(tx) {
        tx.executeSql("SELECT * FROM todo", [], renderFunc,
            html5rocks.webdb.onError);
    });
}

html5rocks.webdb.deleteTodo = function(id) {
    var db = html5rocks.webdb.db;
    db.transaction(function(tx) {
        tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
            html5rocks.webdb.onSuccess,
            html5rocks.webdb.onError);
    });
}

function loadTodoItems(tx, rs) {
    var rowOutput = "";
    var todoItems = document.getElementById("todoItems");
    for (var i = 0; i < rs.rows.length; i++) {
        rowOutput += renderTodo(rs.rows.item(i));
    }

todoItems.innerHTML = rowOutput;
}

function renderTodo(row) {
    return "<li>" + row.todo + " [<a href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID + ");'>Delete</a>]</li>";
}

function init() {
    html5rocks.webdb.open();
    html5rocks.webdb.createTable();
    html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

function addTodo() {
    var todo = document.getElementById("todo");
    html5rocks.webdb.addTodo(todo.value);
    todo.value = "";
}

window.onload = function(){
  init();
}

编译

CSS

HTML

使用HTML5自带的WEB SQL数据库来进行本地化存储

h5, database

编辑器支持Emmet

快捷键

使用HTML5自带的WEB SQL数据库来进行本地化存储

h5, database

HTML5 jQuery3 Bootstrap3介绍幻灯片

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：