indexedDB存储

<!DOCTYPE html>
<html lang="en">
<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>

**注意：使用的时候链接数据库，失败或者完成其他操作关闭数据库；**
更多移步indexedDB API
indexedDB存储

一吃三大碗

引用和评论

vue3.0 集中导出组件

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

indexedDB存储

一吃三大碗

引用和评论

vue3.0 集中 导出组件

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

vue3.0 集中导出组件
