IndexedDB数据库本地存储例子 - 踏得网

local database api for html5

h5, 本地数据库, database

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var VERSION = 6;
var TODO_STORE = "todos";
document.addEventListener('DOMContentLoaded', initIndexedDB);

function initIndexedDB() {
	var request = indexedDB.open("todos", VERSION);
  
  request.onupgradeneeded = function (event) {
  	var database = event.target.result;
		createObjectStoreForTodoItems(database);
  };
  
  request.onsuccess = function (event) {
    var database = event.target.result;
    var todoDao = new TodoDao(database);
    startTodoApplication(todoDao);
  };
}

function createObjectStoreForTodoItems(database) {
	database.createObjectStore(TODO_STORE, { autoIncrement: true });
}

function TodoDao(database) {
  this.createAsync = function(text, todoItemCallback) {
    var store = startTransactionForTodoStore(true);
    var todoItem = { text: text };
    var request = store.add(todoItem);
    request.onsuccess = function (event) {
      todoItem.key = event.target.result;
      todoItemCallback(todoItem);
    };
  };
  
  this.delete = function(todoItem) {
    var store = startTransactionForTodoStore(true);
    store.delete(todoItem.key);
  }
  
  this.fetchAllAsync = function(todoItemsCallback) {
    var store = startTransactionForTodoStore(false);
    var todoItems = [];
    var cursor = store.openCursor();
    
    cursor.onsuccess = function (event) {
      var cursorWithValue = event.target.result;
      var areWeReady = (cursorWithValue === null);
      
      if (areWeReady) {
      	todoItemsCallback(todoItems); 
      } else {
        var todoItem = cursorWithValue.value;
        todoItem.key = cursorWithValue.key;
        todoItems.push(todoItem);
        cursorWithValue.continue();
      }
    }
  };
  
  function startTransactionForTodoStore(doWeNeedToWrite) {
    var mode = doWeNeedToWrite ? "readwrite" : "readonly";
   	var transaction = database.transaction(TODO_STORE, mode);
    var store = transaction.objectStore(TODO_STORE);
    return store;
  }
}

function startTodoApplication(todoDao) {
  var todoList = document.getElementById("todos");
  var todoForm = document.getElementById("todoForm");
  initiallyFillTodoList();
  setupSubmitEventHandlerForTodoForm();
  
  function initiallyFillTodoList() {
    todoDao.fetchAllAsync(function (todoItems) {
      todoItems.forEach(createElementForTodoItem);
  	});
  }
  
  function setupSubmitEventHandlerForTodoForm() {
    todoForm.onsubmit = function (event) {
      var todoTextInputField = todoForm["text"];
    	var todoText = todoTextInputField.value;
      if (todoText.length > 0) {
      	todoDao.createAsync(todoText, createElementForTodoItem);
      }
      todoTextInputField.value = "";
      event.preventDefault();
    };
  }
                          
	function createElementForTodoItem(todoItem) {
    var element = document.createElement("LI");

var textSpan = document.createElement("SPAN"); 
    textSpan.textContent = todoItem.text;
    
    var deleteButton = document.createElement("BUTTON");
    deleteButton.textContent = "X";
    deleteButton.onclick = function (event) {
    	todoDao.delete(todoItem);
      todoList.removeChild(element);
    }
    
    element.appendChild(deleteButton);
		element.appendChild(textSpan);
  	todoList.appendChild(element);
  }
}

编译

CSS

HTML