<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <label>姓名：<input type="text" id="name"></label><br> <label>年龄：<input type="text" id="age"></label><br> <label>邮箱：<input type="text" id="email"></label><br> <button id="add">向数据库中新增数据</button> <button id="read">从数据库中读取数据</button> <button id="readAll">读取所有数据</button> <button id="update">更新数据</button> <button id="remove">删除数据</button> <button id="useIndex">使用索引</button> <script> // 参考地址 // http://www.ruanyifeng.com/blog/2018/07/indexeddb.html // 打开数据库 var request = window.indexedDB.open("imgs"); request.onerror = function (event) { console.log('数据库打开报错'); }; request.onsuccess = function (event) { db = request.result; console.log('数据库打开成功'); console.log(db); }; // 新建数据库 // 新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。 // 通常，新建数据库以后，第一件事是新建对象仓库（即新建表）。 var db; request.onupgradeneeded = function (event) { db = event.target.result; if (!db.objectStoreNames.contains('section1')) { // 创建表格 var objectStore = db.createObjectStore('section1', { keyPath: 'id', //相当于表中的主键 autoIncrement: true }); // 创建表格索引 // IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。 objectStore.createIndex('name', 'name', { unique: false }); objectStore.createIndex('email', 'email', { unique: false }); } } // 新增数据 // 必须启动服务器环境才能添加数据成功 function add() { var request = db.transaction(['section1'], 'readwrite') .objectStore('section1') .add({ name: document.getElementById("name").value, age: document.getElementById("age").value, email: document.getElementById("email").value }); request.onsuccess = function (event) { console.log('数据写入成功'); }; request.onerror = function (event) { console.log('数据写入失败'); } } document.getElementById("add").onclick = add; //读取数据 function read() { var transaction = db.transaction(['section1']); var objectStore = transaction.objectStore('section1'); var request = objectStore.get(1); request.onerror = function (event) { console.log('事务失败'); }; request.onsuccess = function (event) { if (request.result) { console.log('Name: ' + request.result.name); console.log('Age: ' + request.result.age); console.log('Email: ' + request.result.email); } else { console.log('未获得数据记录'); } }; } document.getElementById("read").onclick = read; //读取所有数据 function readAll() { var objectStore = db.transaction('section1').objectStore('section1'); objectStore.openCursor().onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log('Id: ' + cursor.key); console.log('Name: ' + cursor.value.name); console.log('Age: ' + cursor.value.age); console.log('Email: ' + cursor.value.email); cursor.continue(); } else { console.log('没有更多数据了！'); } }; } document.getElementById("readAll").onclick = readAll; //更新数据 function update() { var request = db.transaction(['section1'], 'readwrite') .objectStore('section1') .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' }); request.onsuccess = function (event) { console.log('数据更新成功'); }; request.onerror = function (event) { console.log('数据更新失败'); } } document.getElementById("update").onclick = update; //删除数据 function remove() { var request = db.transaction(['section1'], 'readwrite') .objectStore('section1') .delete(1); request.onsuccess = function (event) { console.log('数据删除成功'); }; } document.getElementById("remove").onclick = remove; // 使用索引 // 索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。 // 假定新建表格的时候，对name字段建立了索引。 function useIndex(){ var transaction = db.transaction(['section1'], 'readonly'); var store = transaction.objectStore('section1'); var index = store.index('name'); var request = index.get('ls'); request.onsuccess = function (e) { var result = e.target.result; if (result) { // ... console.log(result); } else { // ... console.log("没有找到数据") } } } document.getElementById("useIndex").onclick = useIndex; </script> </body> </html>