频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
IndexedDB CURD 操作代码实例
2018-07-11 16:02:01      个评论    来源:猴霸天下  
收藏   我要投稿

IndexedDB CURD 操作代码实例

代码如下

<!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 onclick="add('user')">添加一条数据</button>
<button onclick="count('user')">统计</button>
<button onclick="findAllKeys('user')">所有数据key</button>
<button onclick="findAll('user')">所有数据</button>
<button onclick="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>
点击复制链接 与好友分享!回本站首页
上一篇:Vue关于基本的todoList实现教程
下一篇:如何避免多次提交表单?
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站