浏览器的IndexedDB本地存储

IndexedDB 中文教程

https://www.tangshuang.net/3735.html

 

简单的示例：

	<script type="text/javascript">
		/**
		 * IndexedDB
		 * */
		var db; /*数据库对象*/
		var objectStore; /*仓库(表)*/
		/**
		 * 创建数据库
		 */
		var request = window.indexedDB.open('myIndex', 3); /*该域中的数据库myIndex*/
		request.onerror = function(event) {
			console.log('open database error');
		};
		/**
		 * 业务代码
		 */
		request.onsuccess = function(event) {
			db = request.result; /*数据库对象*/
			// add();
			// read();
			// update();
			// remove();
			//readAll();
			// console.log(db);
		};
		/**
		 * 创建表
		 */
		request.onupgradeneeded = function(event) {
			db = event.target.result; /*数据库对象*/
			if(!db.objectStoreNames.contains('person')) {
				objectStore = db.createObjectStore('person', {
					keyPath: 'id'
				}); /*创建person仓库(表) 主键*/
				// objectStore = db.createObjectStore('person',{autoIncrement:true});/*自动创建主键*/
				// 创建索引，自己规定的，后面作为根据索引进行查询的依据
				objectStore.createIndex('name', 'name', {
					unique: false
				});
				objectStore.createIndex('email', 'email', {
					unique: true
				});
			}
			console.log(db);
		};
		/**
		 * 插入数据
		 */
		function add() {
			var request = db.transaction(['person'], 'readwrite')
				.objectStore('person')
				.add({
					id: 3,
					name: '张三',
					age: 24,
					email: 'zhangsan1@example.com'
				});
			request.onsuccess = function(event) {
				console.log('数据写入成功');
			};
			request.onerror = function(event) {
				console.log('数据写入失败');
			};
		}
		/**
		 * 读取数据
		 */
		function read() {
			var transaction = db.transaction(['person']);
			var objectStore = transaction.objectStore('person');
			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('未获得数据记录');
				}
			};
		}

		/**
		 * 遍历数据
		 */
		function readAll() {
			var objectStore = db.transaction(['person']).objectStore('person');
			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);
				} else {
					console.log('没有更多数据了');
				}
			}
		}

		/**
		 * 更新数据
		 */
		function update() {
			var request = db.transaction(['person'], 'readwrite')
				.objectStore('person')
				.put({
					id: 1,
					name: '李四',
					age: 35,
					email: 'lisi@example.com'
				});
			request.onsuccess = function(event) {
				console.log('数据更新成功');
			};
			request.onerror = function(event) {
				console.log('数据更新失败');
			};
		}

		/**
		 * 删除数据
		 */
		function remove() {
			var request = db.transaction(['person'], 'readwrite')
				.objectStore('person')
				.delete(1);
			request.onsuccess = function(event) {
				console.log('数据删除成功');
			};
		}
	</script>

 

升级版：

class IndexedDB{
	    constructor(dbName, storeName, version){
	        this.storeName = storeName;
	        const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
	        const request = indexedDB.open(dbName, version);
	
	        request.onsuccess = e => {
	            this.db = e.target.result;
	            console.log('indexDB初始化成功');
	        };
	        request.onupgradeneeded = e => {
	            this.db = e.target.result;
	           if(!this.db.objectStoreNames.contains(storeName)){
	
	           	
	                this.store = this.db.createObjectStore(storeName);
	            }
	            console.log("数据库创建成功，Version："+version);
	        };
	        request.onerror = e => {console.info('数据库创建失败', e);};
	    }
	    get(key, callback){
	        const transaction = this.db.transaction(this.storeName);
	        const objectStore = transaction.objectStore(this.storeName);
	        const request = objectStore.get(key);
	
	        request.onerror = e => {console.info('获取失败', e);};
	        request.onsuccess = e => {callback(e.target.result);};
	    }
	    set(key, value){
	        let oldValue;
	        this.get(key, function(res){oldValue = res;});
	
	        if(oldValue){
	            console.info('请运用更新方法更新！');
	        }else{
	            const transaction = this.db.transaction(this.storeName, 'readwrite');
	            const objectStore = transaction.objectStore(this.storeName);
	            const request = objectStore.add(value, key);
	
	            request.onerror = e => {console.info('添加失败', e);};
	        }
	    }
	    update(newValue, key){
	        this.get(key,(oldValue)=>{
	        	if(!oldValue){
		            console.info('请用set方法设置值');
		        }else{
		            const transaction = this.db.transaction(this.storeName, 'readwrite');
		            const objectStore = transaction.objectStore(this.storeName);
		            const request = objectStore.put(newValue, key);
		
		            request.onerror = e => {console.info('更新失败', e);};
		        }
	        });
	    }
	    remove(key){
	        const request = this.db.transaction(this.storeName, 'readwrite')
	                .objectStore(this.storeName)
	                .delete(key);
	        request.onerror = e => {console.info('删除失败', e);};
	    }
		delete(name){
	        window.indexedDB.deleteDatabase(name);
	    }
	    close(){
	        this.db.close();
	    }
	}