IndexedDB CURD 操作

最新推荐文章于 2023-07-07 12:05:50 发布
goinni
最新推荐文章于 2023-07-07 12:05:50 发布
阅读量261
点赞数 2
分类专栏： javascript
本文链接：https://blog.csdn.net/goinni/article/details/80940804
版权
javascript 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
代码如下
<!DOCTYPE html>
<html>
<head>
	<title>indexDB demo</title>
	<script type="text/javascript">
		var indexDB = window.indexedDB;
		var dbName = "huituIndexDB";
		var iDB = null;
		function initIndexDB(){
			/**
			 * 创建 或 打开一个数据库，返回 request 对象
			 * @param args1 数据库名
			 * @param args2 数据库版本号
			 */
			var request = indexDB.open(dbName, 1);

			/**
			 * 数据库打开失败回调
			 */
			request.onerror = function(){

				console.log( dbName + ' open is error!');
			}

			/**
			 * 数据库打开成功时回调
			 */
			request.onsuccess = function(){

				// result 为本次申请的结果 
				// 即,当前数据库对象,用来操作和维护数据表
				iDB = request.result;

			}

			/**
			 * 数据库首次创建版本 或 winodw.indexedDB.open 传递新版本
			 * (新版本号要比现在高)
			 * 通常对主键、字段等进行重定义
			 */
			 request.onupgradeneeded = function( event ){

			 	var db = event.target.result;
			 	// 没有这个表，则创建
			 	if(!db.objectStoreNames.contains('user')){
			 		// 创建一个数据存储对象
				 	var objectStore = db.createObjectStore('user', {
				 		keyPath: 'id',
				 		autoIncrement: true
				 	});

				 	// 定义存储对象的数据项(可理解为数据表里的字段)
				 	objectStore.createIndex('id', 'id', {
				 		unique: true
				 	});
				 	objectStore.createIndex('name', 'name');
				 	objectStore.createIndex('time', 'time');
				 	objectStore.createIndex('remark', 'remark');
			 	}
			 }
		}
// 初始化
initIndexDB();


	</script>
</head>
<body>
<button οnclick="add('user')">添加一条数据</button>
<button οnclick="count('user')">统计</button>
<button οnclick="findAllKeys('user')">所有数据key</button>
<button οnclick="findAll('user')">所有数据</button>
<button οnclick="findDataById('user',parseInt(Math.random()*10))">根据 id获取一条数据</button>

<script type="text/javascript">
	/**
	 * 添加
	 */
	function add(storename){
		// 开启事务&打开存储对象
		var objectStore = iDB.transaction([storename], 'readwrite').objectStore(storename);
		// 添加到数据对象中
		objectStore.add({
			name: "jerry"+parseInt(Math.random()*10),
			time: new Date().getTime(),
			remark: 'indexDb hello world'
		});
	}
	/**
	 * 统计
	 */
    function count(storename){
    	// 开启事务&打开存储对象
		var objectStore = iDB.transaction([storename], 'readwrite').objectStore(storename);

        var reque = objectStore.count();//数据库访问方法

        reque.onsuccess = function(event){
            var count = event.target.result;
            console.log(count);
        }
    }

    /**
     * 显示用户列表
     */
    function findAllKeys(storename){
    	// 开启事务&打开存储对象
		var objectStore = iDB.transaction([storename], 'readwrite').objectStore(storename);
		// 获取所有 key
        var request = objectStore.getAllKeys();
        request.onsuccess = function(event){
            var keys = event.currentTarget.result;
            console.log(keys);
        }
    }
    /**
     * 根据 id 查一条数据
     */
    function findDataById(storename, key){
    	// 开启事务&打开存储对象
        var objectStore = iDB.transaction([storename],'readwrite').objectStore(storename);
        var request = objectStore.get(key);
        request.onerror = function(){
            console.error('getDataByKey error');
        };
        request.onsuccess = function(e){
            var result = e.target.result;
            console.log('查找数据成功')
            console.log(result);
        };
    }
    /**
     * 根据 id 更新一条数据
     */
	function update(storename, id, data) {

        var objectStore = iDB.transaction([storename],'readwrite').objectStore(storename);
	    // 获取存储的对应键的存储对象
	    var req = objectStore.get(id);
	    // 获取成功后替换当前数据
	    req.onsuccess = function(event) {
	        // 当前数据
	        var myRecord = req.result;
	        // 遍历替换
	        for (var key in data) {
	            if (typeof myRecord[key] != 'undefined') {
	                myRecord[key] = data[key];
	            }
	        }
	        // 更新数据库存储数据             
	        objectStore.put(myRecord);
	    };
	}
	/**
	 * 根据 id 删除一条记录
	 */
	function deleteById(storename, id){
		// 开启事务&打开存储对象
        var objectStore = iDB.transaction([storename],'readwrite').objectStore(storename);
		return objectStore.delete(id);
	}
	/**
	 * 获取所有数据
	 */
	function findAll(storename){
		// 开启事务&打开存储对象
        var objectStore = iDB.transaction([storename]).objectStore(storename);
		objectStore.openCursor().onsuccess = function(event) {
		    var cursor = event.target.result;
		    if (cursor) {
		        // cursor.value就是数据对象
		        console.log(cursor.value);
		        // 游标没有遍历完，继续
		        cursor.continue();
		    } else {
		        // 如果全部遍历完毕...
		        console.log('全部遍历完毕');
		    }
		}
	}
	/**
	 * 查找一个范围内的数据
	 * @param storename 表名
	 * @param start 开始 id
	 * @param end 结束 id
	 * @param b1 开始 true 不包涵开始位置
	 * @param b2 结束 true 不包涵结束位置
	 */
	function findRange(storename, start, end, b1, b2){
		// 确定打开的游标的主键范围
		var keyRangeValue = IDBKeyRange.bound(start, end, b1, b2);
		// 开启事务&打开存储对象
        var objectStore = iDB.transaction([storename]).objectStore(storename);
		objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
		    var cursor = event.target.result;
		    if(cursor){
			    console.log(cursor.value);
			    // 游标没有遍历完，继续
			    cursor.continue();
		    }else{
		    	console.log('ending');
		    }
		}
	}
	/**
	 * 清空表数据
	 */
	function cleanData(storename){
        // 开启事务&打开存储对象
        var objectStore = iDB.transaction([storename],'readwrite').objectStore(storename);
		objectStore.clear();
	}
</script>

</body>
</html>