频道栏目
首页 > 程序开发 > 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 + &世界杯投注官网39; open is error!&世界杯投注官网39;);
			}
			/**
			 * 数据库打开成功时回调
			 */
			request.onsuccess = function(){
				// result 为本次申请的结果 
				// 即,当前数据库对象,用来操作和维护数据表
				iDB = request.result;
			}
			/**
			 * 数据库首次创建版本 或 winodw.indexedDB.open 传递新版本
			 * (新版本号要比现在高)
			 * 通常对主键、字段等进行重定义
			 */
			 request.onupgradeneeded = function( event ){
			 	var db = event.target.result;
			 	// 没有这个表,则创建
			 	if(!db.objectStoreNames.contains(&世界杯投注官网39;user&世界杯投注官网39;)){
			 		// 创建一个数据存储对象
				 	var objectStore = db.createObjectStore(&世界杯投注官网39;user&世界杯投注官网39;, {
				 		keyPath: &世界杯投注官网39;id&世界杯投注官网39;,
				 		autoIncrement: true
				 	});
				 	// 定义存储对象的数据项(可理解为数据表里的字段)
				 	objectStore.createIndex(&世界杯投注官网39;id&世界杯投注官网39;, &世界杯投注官网39;id&世界杯投注官网39;, {
				 		unique: true
				 	});
				 	objectStore.createIndex(&世界杯投注官网39;name&世界杯投注官网39;, &世界杯投注官网39;name&世界杯投注官网39;);
				 	objectStore.createIndex(&世界杯投注官网39;time&世界杯投注官网39;, &世界杯投注官网39;time&世界杯投注官网39;);
				 	objectStore.createIndex(&世界杯投注官网39;remark&世界杯投注官网39;, &世界杯投注官网39;remark&世界杯投注官网39;);
			 	}
			 }
		}
// 初始化
initIndexDB();
 
	</script>
</head>
<body>
<button onclick="add(&世界杯投注官网39;user&世界杯投注官网39;)">添加一条数据</button>
<button onclick="count(&世界杯投注官网39;user&世界杯投注官网39;)"></button>
<button onclick="findAllKeys(&世界杯投注官网39;user&世界杯投注官网39;)">所有数据key</button>
<button onclick="findAll(&世界杯投注官网39;user&世界杯投注官网39;)">所有数据</button>
<button onclick="findDataById(&世界杯投注官网39;user&世界杯投注官网39;,parseInt(Math.random()*10))">根据 id获取一条数据</button>
<script type="text/javascript">
	/**
	 * 添加
	 */
	function add(storename){
		// 开启事务&打开存储对象
		var objectStore = iDB.transaction([storename], &世界杯投注官网39;readwrite&世界杯投注官网39;).objectStore(storename);
		// 添加到数据对象中
		objectStore.add({
			name: "jerry"+parseInt(Math.random()*10),
			time: new Date().getTime(),
			remark: &世界杯投注官网39;indexDb hello world&世界杯投注官网39;
		});
	}
	/**
	 * 
	 */
    function count(storename){
    	// 开启事务&打开存储对象
		var objectStore = iDB.transaction([storename], &世界杯投注官网39;readwrite&世界杯投注官网39;).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], &世界杯投注官网39;readwrite&世界杯投注官网39;).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],&世界杯投注官网39;readwrite&世界杯投注官网39;).objectStore(storename);
        var request = objectStore.get(key);
        request.onerror = function(){
            console.error(&世界杯投注官网39;getDataByKey error&世界杯投注官网39;);
        };
        request.onsuccess = function(e){
            var result = e.target.result;
            console.log(&世界杯投注官网39;查找数据成功&世界杯投注官网39;)
            console.log(result);
        };
    }
    /**
     * 根据 id 更新一条数据
     */
	function update(storename, id, data) {
        var objectStore = iDB.transaction([storename],&世界杯投注官网39;readwrite&世界杯投注官网39;).objectStore(storename);
	    // 获取存储的对应键的存储对象
	    var req = objectStore.get(id);
	    // 获取成功后替换当前数据
	    req.onsuccess = function(event) {
	        // 当前数据
	        var myRecord = req.result;
	        // 遍历替换
	        for (var key in data) {
	            if (typeof myRecord[key] != &世界杯投注官网39;undefined&世界杯投注官网39;) {
	                myRecord[key] = data[key];
	            }
	        }
	        // 更新数据库存储数据             
	        objectStore.put(myRecord);
	    };
	}
	/**
	 * 根据 id 删除一条记录
	 */
	function deleteById(storename, id){
		// 开启事务&打开存储对象
        var objectStore = iDB.transaction([storename],&世界杯投注官网39;readwrite&世界杯投注官网39;).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(&世界杯投注官网39;全部遍历完毕&世界杯投注官网39;);
		    }
		}
	}
	/**
	 * 查找一个范围内的数据
	 * @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(&世界杯投注官网39;ending&世界杯投注官网39;);
		    }
		}
	}
	/**
	 * 清空表数据
	 */
	function cleanData(storename){
        // 开启事务&打开存储对象
        var objectStore = iDB.transaction([storename],&世界杯投注官网39;readwrite&世界杯投注官网39;).objectStore(storename);
		objectStore.clear();
	}
</script>
</body>
</html>
点击复制链接 与好友分享!回本站首页
上一篇:Vue关于基本的todoList实现教程
下一篇:最后一页
相关文章
图文推荐

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

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

世界杯投注官网