浏览器的IndexedDB本地存储续
IndexedDB 中文教程
https://www.tangshuang.net/3735.html
续：
<script type="text/javascript"> const request = window.indexedDB.open('mydb', 1); let db; request.onsuccess = e => { db = e.target.result console.log(db); } request.onerror = e => {console.info('数据库创建失败', e);}; /** * 创建 objectStore 和修改 objectStore 都只能在 db 的 onupgradeneeded 事件中进行， * 因此，要创建 objectStore，必须在前面的 open 操作那个时候来进行。 * * 使用 createObjectStore 方法来实现 objectStore 的创建。但是，需要注意的是， * 一个 database 中，只允许存在一个同名的 objectStore，因此，如果你第二次 createObjectStore * 相同名的objectStore，程序会报错。比如你的程序如果像上面这样写，必然会遇到一个问题，就是当你 * 更新 version 的时候，会再次执行 createObjectStore，那么就会报错，程序就会中断。另一个注 * 意点是，一旦一个 objectStore 被创建，它的 name 和 keyPath 是不能修改的。 * * createObjectStore() 创建一个objectStore，有两个参数： name：要创建的objectStore的name options：选项 keyPath：主键，你将要存入的object的一个property name，比如每一个object都有一个id属性，那么可以使用id作为keyPath， 在查询的时候，get方法的参数，是id值 autoIncrement：keyPath是否自增，如果为true，那么你在添加一个object的时候，可以不用传id，id会自动加1。但是这样的话， 你就不知道你的这个object的id值到底是多少，所以不建议使用。默认为false */ request.onupgradeneeded = (e) => { const db = e.target.result; // 对象存储 if(!db.objectStoreNames.contains('xiehobj')) { let objectStore = db.createObjectStore('xiehobj', { keyPath: 'id' }); // 参数：索引名称，indexPath类似keyPath，选项参数 // 为name创建索引，unique: true表示name的值不能重复，意思名字不可以重复 objectStore.createIndex('name', 'name', { unique: true }); // 在根据索引进行查询的时候，语法是这样的： // const request = objectStore.index('indexName').get('indexKey') } // 非对象存储 if(!db.objectStoreNames.contains('xieh')) { db.createObjectStore('xieh', { autoIncrement: true }); } // 混合仓库，当你插入的对象中不存在 id 属性时，对象会被污染，会自动加上 id 属性，并且赋予一个数字作为 key。 if(!db.objectStoreNames.contains('mystore')) { db.createObjectStore('mystore', { keyPath: 'id', autoIncrement: true }) } } function addXiehObj(){ let transaction = db.transaction(['xiehobj'], 'readwrite'); let objectStore = transaction.objectStore('xiehobj'); let status = objectStore.add({"id":1,"name":"谢辉","age":23}); status.onsuccess = function(e){ console.log("写入xiehobj成功：",e); } status.onerror = function(e){ console.log("写入xiehobj失败：",e); } } function addXieh(){ let transaction = db.transaction(['xieh'], 'readwrite'); let objectStore = transaction.objectStore('xieh'); let status = objectStore.add("我是值value","我是key2"); // 这里是自动生成key，数字的key自增，但是建议上一行代码，指定key，不然数据多可以后无法确定自动生成的key是多少 objectStore.add("我是值value"); status.onsuccess = function(e){ console.log("写入xieh成功：",e); } status.onerror = function(e){ console.log("写入xieh失败：",e); } } function addMystore(){ let transaction = db.transaction(['mystore'], 'readwrite'); let objectStore = transaction.objectStore('mystore'); let status1 = objectStore.add({"id":2,"name":"谢辉mystore","age":23}); // 这种是错误的 //let status2 = objectStore.add("我是值value+mystore",1); // 数据里没有指定id时，他会自动生成 let status2 = objectStore.add({"name":"谢辉mystore","age":23}); status1.onsuccess = function(e){ console.log("写入Mystore成功：",e); } status1.onerror = function(e){ console.log("写入Mystore失败：",e); } status2.onsuccess = function(e){ console.log("写入Mystore成功：",e); } status2.onerror = function(e){ console.log("写入Mystore失败：",e); } } function getXiehObj(){ let transaction = db.transaction(['xiehobj'], 'readonly') let objectStore = transaction.objectStore('xiehobj') let request = objectStore.get(1); console.log("getXiehObj:" + request); request.onerror = e => {console.info('获取失败', e);}; request.onsuccess = e => {console.info("获取数据成功",e.target.result)}; } function getXieh(){ let transaction = db.transaction(['xieh'], 'readonly') let objectStore = transaction.objectStore('xieh') let request = objectStore.get("我是key2"); console.log("getXieh:" + request); request.onerror = e => {console.info('获取失败', e);}; request.onsuccess = e => {console.info("获取数据成功",e.target.result)}; } function getMystore(){ let transaction = db.transaction(['mystore'], 'readonly') let objectStore = transaction.objectStore('mystore') let request = objectStore.get(2); console.log("getMystore:" + request); request.onerror = e => {console.info('获取失败', e);}; request.onsuccess = e => {console.info("获取数据成功",e.target.result)}; } function updateXiehObj(){ let transaction = db.transaction(['xiehobj'], 'readwrite') let objectStore = transaction.objectStore('xiehobj') let request = objectStore.put({ id: 1, name: '谢俊楠', age:24 }); request.onerror = e => {console.info('更新失败', e);}; request.onsuccess = e => {console.info('更新成功', e);}; } function updateXieh(){ let transaction = db.transaction(['xieh'], 'readwrite') let objectStore = transaction.objectStore('xieh') let request = objectStore.put("我是新value","我是key2"); request.onerror = e => {console.info('更新失败', e);}; request.onsuccess = e => {console.info('更新成功', e);}; } function updateMystore(){ let transaction = db.transaction(['mystore'], 'readwrite') let objectStore = transaction.objectStore('mystore') let request = objectStore.put({ id: 2, name: '谢俊楠', age:24 }); request.onerror = e => {console.info('更新失败', e);}; request.onsuccess = e => {console.info('更新成功', e);}; } function deleteXiehObj(){ let transaction = db.transaction(['xiehobj'], 'readwrite') let objectStore = transaction.objectStore('xiehobj') let request = objectStore.delete(1); request.onerror = e => {console.info('删除失败', e);}; request.onsuccess = e => {console.info('删除成功', e);}; } function deleteXieh(){ let transaction = db.transaction(['xieh'], 'readwrite') let objectStore = transaction.objectStore('xieh') let request = objectStore.delete("我是key2"); request.onerror = e => {console.info('删除失败', e);}; request.onsuccess = e => {console.info('删除成功', e);}; } function deleteMystore(){ let transaction = db.transaction(['mystore'], 'readwrite') let objectStore = transaction.objectStore('mystore') let request = objectStore.delete(2); request.onerror = e => {console.info('删除失败', e);}; request.onsuccess = e => {console.info('删除成功', e);}; } function deleteDatabse(){ window.indexedDB.deleteDatabase("mydb"); } function close(){ db.close(); } </script>
