indexedDB

indexDB是HTML5的新概念，用于將數據存儲再用戶的瀏覽器中，它是一個非關系型數據庫，會將數據集作為個體對象存儲，數據形式使用的是JSON

indexeddb比本地存儲更強大，可用于需要存儲大量數據的應用程序。這些應用程序可以更高效地運行，并且加載速度更快。

對象倉庫objectStore

一個數據庫中可以包含多個objectStore，objectStore可以存放多種類型數據，就相當于是一張表，可以使用每條記錄中的某個指定字段作為鍵值（keypath），也可以使用自動生成的遞增數字作為鍵值（keyGenerator），選擇鍵的類型不同，objectStore可以存儲的數據結構也有差異

基本語法

語法作用

window.indexedDB.open(數據庫名，版本號)	打開數據庫（如果數據庫不存在則創建一個新的庫）
.onerror	數據庫操作過程中出錯時觸發
.onupgradeneeded	創建一個新的數據庫或者修改數據庫版本號時觸發
.onsuccess	數據庫成功完成所有操作時觸發
.createObjectStore(對象倉庫名稱，keypath)	創建對象倉庫
.createIndex（索引名稱，keypath，objectParameters）	建立索引
.transaction(對象倉庫名稱) || .transaction(對象倉庫名稱，‘readwrite’)	創建一個事務 || 創建一個事務，并要求具有讀寫權限
.objectStore(對象倉庫名稱)	獲取對象倉庫
.get ( num ) || .getAll()	獲取數據 || 獲取全部數據
.add( data )	添加數據
.put( newdata )	修改數據
.delete ( keypath )	刪除數據

任務清單案例

<template><div><table cellspacing="0" cellpadding="8" border="1"><caption>今日任務清單<button @click="dialogFormVisible = true">+ 添加任務</button></caption><thead><tr><th>任務內容</th><th>狀態</th><th>操作</th></tr></thead><tbody v-if="List.length !== 0"><tr v-for="item in List" :key="item.id"><td>{{ item.Task }}</td><td style="text-align: center">{{ item.status == false ? "未完成" : "已完成" }}</td><td style="text-align: center"><el-button size="small" @click="removeTask(item.id)">刪除</el-button><el-button size="small" @click="updateTaskId(item.id)">編輯</el-button></td></tr></tbody><tbody class="elseTbody" v-else><tr><td colspan="2">今日你還沒有想要做的事哦！</td></tr></tbody></table><el-dialog title="添加任務" :visible.sync="dialogFormVisible" width="90%"><el-form :model="addList"><el-form-item label="內容" label-width="40px"><el-input v-model="addList.Task" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="addTask">確 定</el-button></div></el-dialog><el-dialogtitle="編輯任務":visible.sync="updateDialogFormVisible"width="90%"><el-form :model="addList"><el-form-item label="內容" label-width="40px"><el-input v-model="addList.Task" autocomplete="off"></el-input></el-form-item><el-form-item label="狀態" label-width="40px"><el-switch v-model="addList.status"></el-switch></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="updateDialogFormVisible = false">取 消</el-button><el-button type="primary" @click="updateTask">確 定</el-button></div></el-dialog></div> </template> <script> export default {data () {return {db: null,// 全部任務清單List: [],// 添加任務清單addList: {id: new Date().getTime(),Task: '',status: false},// 添加任務清單對話框顯示dialogFormVisible: false,// 修改任務清單對話框顯示updateDialogFormVisible: false}},created () {this.indexedDB()// this.readList()},methods: {// 初始化indexedDBindexedDB () {// 打開數據庫，兩個參數（數據庫名字，版本號），如果數據庫不存在則創建一個新的庫var request = window.indexedDB.open('TaskList', '1')// 數據庫操作過程中出錯，則錯誤回調被觸發request.onerror = (event) => {console.log(event)}this.request = request// 創建一個新的數據庫或者修改數據庫版本號時觸發request.onupgradeneeded = (event) => {var db = event.target.result// 創建對象倉庫用來存儲數據，把id作為keyPath，keyPath必須保證不重復，相當于數據庫的主鍵var objectStore = db.createObjectStore('Today_Mission', { keyPath: 'id' })// 建立索引，name和age可能重復，因此unique設置為falseobjectStore.createIndex('Task', 'Task', { unique: false })objectStore.createIndex('status', 'status', { unique: false })}// 數據庫操作一切正常，所有操作后觸發this.request.onsuccess = (event) => {this.db = event.target.resultthis.readList()}},readList () {var transaction = this.db.transaction('Today_Mission').objectStore('Today_Mission')var request = transaction.getAll()request.onerror = (event) => {this.$message.error('事務失敗')}request.onsuccess = (event) => {this.List = request.result}},addTask () {if (this.addList.Task !== '') {var request = this.db.transaction('Today_Mission', 'readwrite').objectStore('Today_Mission').add(this.addList)request.onsuccess = (event) => {this.$message.success('添加成功')this.dialogFormVisible = falsethis.readList()this.addList = {id: new Date().getTime(),Task: '',status: false}}request.onerror = (event) => {this.$message.error('添加失敗')}} else {this.$message.error('內容不能為空哦')}},updateTaskId (id) {this.updateDialogFormVisible = truethis.addList = this.List.find(item => item.id === id)},updateTask () {if (this.addList.Task !== '') {var request = this.db.transaction('Today_Mission', 'readwrite').objectStore('Today_Mission').put(this.addList)request.onsuccess = (event) => {this.$message.success('數據更新成功')this.updateDialogFormVisible = falsethis.readList()this.addList = {id: new Date().getTime(),Task: '',status: false}}request.onerror = (event) => {this.$message.error('數據更新失敗')}} else {this.$message.error('內容不能為空哦')}},removeTask (id) {this.$confirm('確定要刪除這條任務嘛', '刪除任務', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'error'}).then(() => {var request = this.db.transaction('Today_Mission', 'readwrite').objectStore('Today_Mission').delete(id)request.onsuccess = (event) => {this.$message.success('刪除成功')this.readList()}}).catch(() => {this.$message({type: 'info',message: '已取消刪除'})})}} } </script> <style> table {width: 100%;border: 1px solid #ccc; } caption {padding: 20px 0px;font-size: 20px;font-weight: bold; } caption button {display: block;width: 100%;font-size: 13px;text-align: left;margin-top: 20px;height: 35px;border: 1px solid rgb(248, 206, 206);color: rgb(83, 81, 81);padding-left: 15px;background-color: rgb(255, 234, 223); } thead tr {height: 50px; } thead tr th {border-bottom: 1px solid #ccc; } tbody tr {font-size: 13px; } .elseTbody tr {height: 70px;font-size: 13px;letter-spacing: 2px;text-align: center; } </style>

總結

以上是生活随笔為你收集整理的indexedDB基本使用（内含案例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。