最新公告
  • 欢迎您访问爱上源码网,分享精品整站源码,网站模板,游戏源码,APP小程序源码以及视频教程免费下载;服务永无止境!立即加入我们
  • indexedDB存储的代码示例

    本篇文章给大家带来的内容是关于indexedDB存储的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>indexedDB(浏览器本地存储数据库)</title>
    </head>
    <body>
    <p>IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。</p>
    <p>IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。</p>
    <h3>indexedDB特点</h3>
    <ol>
        <li>键值对存储:采用对象仓库存储数据,所有的数据类型都可以直接存入,主键是独一无二的</li>
        <li>异步:</li>
        <li>支持事务:IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。</li>
        <li>同源限制: IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。</li>
    </ol>
    <script>
        /**
         * databaseName:字符串,表示数据库的名字,不存在则新建
         * version :第二个参数是整数,表示数据库的版本。默认为1
         * 返回一个 IDBRequest 对象 对象通过三种事件error、success、upgradeneeded
         *
         * 新建数据库与打开数据库是同一个操作。如果指定的数据库不存在,就会新建。不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成
         *
         * 新建数据步骤:
         * step1:新建对象仓库(即新建表
         * step2:新建索引
         *
         * */
        //IDBDatabase对象
        let db;
        //创建或者打开
        let request = window.indexedDB.open('newIDB');
        //删除数据库
        var DBDeleteRequest = window.indexedDB.deleteDatabase('newIDB');
    
        DBDeleteRequest.onerror = function (event) {
            console.log('Error');
        };
    
        DBDeleteRequest.onsuccess = function (event) {
            console.log('success');
        };
    
        //error事件--表示打开数据失败
        request.onerror = function (event) {
            console.log('数据库打开报错');
            db.close();
        };
        request.success = function (event) {
            //通过request对象的result属性拿到数据库对象
            db = request.result;
            console.log(db);
            console.log('数据库打开成功')
        };
        console.log(request);
    
        //onupgradeneeded---如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件
        request.onupgradeneeded = function (event) {
            //通过事件对象的target.result属性,拿到数据库实例。
            console.log(event);
            //request对象的result属性上面,拿到一个IDBDatabase对象,它表示连接的数据库
            db = event.target.result;
    
            let objectStore;
            // 更好的写发是判断表是否存在
            if (!db.objectStoreNames.contains('newIDB')) {
                /**新建数据
                 * 新建对象仓库(即新建表)
                 * 新增一张叫做person的表格,主键是id
                 * */
                //主键(key)是默认建立索引的属性。如果没有可以让 IndexedDB 自动生成主键db.createObjectStore('person',{ autoIncrement: true })
                objectStore = db.createObjectStore('newIDB', {keyPath: 'id'});
                /**
                 * 新建索引
                 * 三个参数分别为索引名称、索引所在的属性、配置对象(说明该属性是否包含重复的值)
                 * **/
                objectStore.createIndex('name', 'name', {unique: false});
                objectStore.createIndex('email', 'email', {unique: true});
            }
    
    
        };
    
        /**新增数据
         * 新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。
         * 写入数据需要新建一个事务
         * 新建时必须指定表格名称和操作模式("只读"或"读写")
         * 写入操作是一个异步操作,通过监听连接对象的success事件和error事件,了解是否写入成功。
         * **/
        function add() {
    
            //通过IDBTransaction.objectStore(name)方法,拿到 IDBObjectStore 对象,再通过表格对象的add()方法,向表格写入一条记录。
            var request = db.transaction(['newIDB'], 'readwrite')
                .objectStore('newIDB')
                .add({id: 1, name: '张三', age: 24, email: 'zhangsan@example.com'});
    
            request.onsuccess = function (event) {
                console.log('数据写入成功');
            };
    
            request.onerror = function (event) {
                console.log('数据写入失败');
            }
        }
    
        setTimeout(function () {
            console.log(db);
            add();
        }, 2000);
    
        /** 读取数据
         *
         *读取数据也是通过事务完成。
         *
         *
         * **/
        function read() {
            //创建是务
            let transaction = db.transaction(['newIDB']);
            //拿到 IDBObjectStore 对象
            let objectStore = transaction.objectStore('newIDB');
            //objectStore.get()方法用于读取数据,参数是主键的值。
            let request = objectStore.get(1);
            //失败监听
            request.onerror = function (event) {
                console.log('事务失败');
                db.close()
            };
            //成功监听
            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('未获得数据记录');
                }
            };
        }
    
        setTimeout(function () {
            read();
        }, 4000);
    
    
        /**遍历数据
         *遍历数据表格的所有记录,要使用指针对象 IDBCursor。
         *
         * */
        function readAll() {
            let objectStore = db.transaction('newIDB').objectStore('newIDB');
            //新建指针对象的openCursor()方法是一个异步操作,所以要监听success事件。
            objectStore.openCursor().onsuccess = function (event) {
                let 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);
                    cursor.continue();
                } else {
                    console.log('没有更多数据了!');
                }
            };
        }
    
        setTimeout(function () {
            readAll();
        }, 6000);
    
    
        /**跟新数据
         *更新数据要使用IDBObject.put()方法。
         *
         * */
    
        function update() {
            //put()方法自动更新了主键为1的记录。
            let request = db.transaction(['newIDB'], 'readwrite')
                .objectStore('newIDB')
                .put({id: 1, name: '李四', age: 35, email: 'lisi@example.com'});
    
            request.onsuccess = function (event) {
                console.log('数据更新成功');
            };
    
            request.onerror = function (event) {
                console.log('数据更新失败');
                db.close();
            }
        }
    
        setTimeout(function () {
            update();
        }, 8000);
    
        /**删除数据
         *IDBObjectStore.delete()方法用于删除记录
         *
         * **/
        function remove() {
            let request = db.transaction(['newIDB'], 'readwrite')
                .objectStore('newIDB')
                .delete(1);
    
            request.onsuccess = function (event) {
                console.log('数据删除成功');
            };
        }
    
        // remove();
    
        /**使用索引
         * 索引的意义在于,可以让你搜索任意字段,也就是说从任意字段拿到数据记录。如果不建立索引,默认只能搜索主键(即从主键取值)。
         * */
        function search() {
            let request = db.transaction(['newIDB'], 'readonly')
                .objectStore('newIDB')
                .index('name')
                .get('李四');
            request.onsuccess = function (e) {
                var result = e.target.result;
                if (result) {
                    console.log('搜索成功')
                } else {
                    console.log('搜索失败')
                }
            }
        }
    
        // search();
    </script>
    
    </body>
    </html>
    
    **注意:使用的时候链接数据库,失败或者完成其他操作关闭数据库;**

    本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!

    以上就是indexedDB存储的代码示例的详细内容,更多请关注爱上源码网其它相关文章!

  • 微信
  • 分享
  • 相关标签:javascript
  • 本文转载于:segmentfault,如有侵犯,请联系916990011@qq.com删除
    • 上一篇:如何更新JavaScript中的cookie?(代码示例)
    • 下一篇:apply() 和 call() 方法有什么作用?

    相关文章

    相关视频

    • html5怎样操作indexedDB
    • indexeddb数据库的使用详解
    • H5的本地存储之IndexedDB
    • HTML5的本地存储IndexedDB
    • indexedDB存储的代码示例
    • 细说JS中的函数
    • JS数组与对象编程5
    • JS数组与对象编程4
    • JS数组与对象编程3

    本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
    本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~

    重要声明:
    1.本站视频教程,软件及网站源码版权均属于原作者所有,您必须在下载后的24个小时之内,从您的电脑中删除!非法商业用途,后果自负!
    2.本站不保证所提供下载资源的安全性和完整性,仅供下载学习之用!如链接失效或资源含外站广告,请联系客服处理!给予奖励!
    3.本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!本站提供有偿服务!如有侵权请联系在线客服!
    4.如您手中有优质资源或教程,可以自助投稿发布,成功分享后有奖励和额外收入!
    5.如您需要正版微擎模块可联系本站客服,我们有价值30w+商业微擎应用出售微擎坑位和招收代理!
    6.400电话/软著/ICP,EDI许可证/商标特价办理中!
    爱上源码下载网 » indexedDB存储的代码示例

    常见问题FAQ

    从网站下载的源码都有安装教程么?不会安装怎么办?
    本站发布的网站源码和模板资源大部分在压缩包内都有教程,如您不会安装可以联系本站在线技术进行付费安装。
    爱上源码的所有源码都是亲测能正常运行的么?
    本站目前拥有资源10w+,包含整站源码,网站模板,游戏源码,小程序源码,视频教程,破解软件等,每天也在测试更新;因时间和精力有限我们无法对资源进行一一测试,只能保证所分享资源内容无误,希望理解。
    我手中的优质资源可以在你这换钱或者VIP么?
    爱上源码支持投稿,欢迎发布您手中的优质资源进行售卖;本站VIP支持免费获取,目前邀请10人注册爱上源码即可免费获取VIP。
    爱上源码除了资源分享还有其他业务没?
    【价值30W+微擎模块出售正版商业微擎坑位及招收代理,详情咨询本站客服!】我们团队目前运营并推广几套商业化saas智能小程序系统能满足大部分小程序开发需求,并由SaaS和独立部署版商城小程序系统;另外销售400电话,各种ICP/EDI资质证书办理,软著和商标注册服务等。

    发表评论

    • 32会员总数(位)
    • 35644资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 656稳定运行(天)

    提供最优质的资源集合

    开通VIP 源码下载