html5 indexDB DEMO（一）

最新推荐文章于 2025-09-25 11:11:02 发布

原创最新推荐文章于 2025-09-25 11:11:02 发布 · 6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 indexDB DEMO

html5和css3 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个HTML5应用程序中使用IndexedDB的具体实例，包括数据库创建、数据存储及删除等基本操作，并通过JavaScript实现了交互功能。

<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Application - IndexedDb</title>
<script type="text/javascript">
var blockbusters={
	 title:"nishi",
	 derector:"shi",
	 length:120
	};//假设这个object用来保存的
	
var db;
var request;
var store;
 function createDatabase(dbName){
	  request=indexedDB.open(dbName,3);
	  
	  request.onerror = function () {
           alert("fail to open datbase with:"+event.target.message);
	   }
      request.onsuccess = function (event) {
			 alert("success open the database!");
			 // store.add(ss);
			 db=event.target.result;
			 var transaction = db.transaction(["blockbusters"], "readwrite");
             var objectStore = transaction.objectStore("blockbusters");
			 objectStore.add(blockbusters);
			// var store = db.createObjectStore("blockbusters", {keyPath: "title",autoIncrement: false});
			//   store.createIndex("director", "director", { unique: false });
		    // var transaction = db.transaction(["blockbusters"],readwirte);
            //    store = transaction.objectStore("blockbusters");
            //   request = store.put(video);	 
       } 
	  request.onupgradeneeded = function(event) {
		   alert("version Change");
           db = event.target.result;
		   store = db.createObjectStore("blockbusters", {keyPath: "title",autoIncrement: false});
			  // store.createIndex("director", "director", { unique: false });
		  
	   }
	 }
	 
   function deletedatabase(dbName){
	   try{
	     indexedDB.deleteDatabase(dbName);
	   }catch(e){
		   alert(e.getMessage);
		   }
	   }	 
</script>
</head>
<body>
	<button onclick="createDatabase('Test')">Create Database</button>
    <button onclick="deletedatabase('customers')">delet Database</button>

</body>
</html>