zoukankan      html  css  js  c++  java
  • 前端缓存-IndexedDB

    IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。

    IndexedDB 具有以下特点

    (1)键值对储存。 IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。

    (2)异步。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。

    (3)支持事务。 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。

    (4)同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

    (5)储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。

    (6)支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

    IndexedDB操作步聚:
    var db; //定义数据库实例
    var indexedDBInstance = {

    //开打数据库
    OpenDB: function() {
    //打开数据库[open(参数1,参数2) 参数1:表示数据库名称 参数2:表示数据库版本]
    var resquest = window.indexedDB.open("h5", 1); //返回IDBRequest 对象,IDBRequest 对象 三个事件:error、success、upgradeneeded
    resquest.onerror = function() {
    //error失败事件
    };
    resquest.onupgradeneeded = function(event) {
    //upgradeneeded事件[当指定数据库版本大于当前版本时 触发版本升级事件]
    //新建数据库与打开数据库是同一个操作。如果指定的数据库不存在,就会新建。不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成,因为这时版本从无到有,所以会触发这个事件
    db = event.target.result; //获取数据库实例对象
    //创建表 必须在onupgradeneeded 回调中 调用
    // var objectstore = indexedDBInstance.CreateTable("User", {
    // keyPath: "id"
    // }, 'test');
    var objectstore = indexedDBInstance.CreateTable('User', {
    autoIncrement: true
    }, "test");
    //创建索引
    var index = indexedDBInstance.CreateIndex(objectstore);

    };
    resquest.onsuccess = function(event) {
    //success成功事件
    db = event.target.result; //获取数据库实例对象
    console.log('数据库打开成功');
    };
    },
    CreateTable: function(tableName, pk, transname) {
    ///<summary>
    ///创建表
    ///<param name="tableName">表名</param>
    ///<param name="pk">设置主键对象</param>
    ///<param name="transname">事物名称</param>
    ///</summary>
    if (db) {
    if (!db.objectStoreNames.contains(tableName, transname)) {
    //pk:{ keyPath: 'id' } 表示主键为ID
    //pk:{ autoIncrement: true } 表示主键自增长
    //pk:{keyPath:'foo.bar'}主键也可以指定为下一层对象的属性,比如{ foo: { bar: 'baz' } }的foo.bar也可以指定为主键。
    return db.createObjectStore(tableName, pk); //返回表对象
    }
    }
    },
    CreateIndex: function(objectstore) {
    //createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象(说明该属性是否包含重复的值)
    objectstore.createIndex('name', 'Name', {
    unique: false
    });
    objectstore.createIndex('qq', 'QQ', {
    unique: true
    });
    },
    AddData: function() {
    ///<summary>
    ///添加数据
    ///</summary>
    var request = db.transaction(['User'], 'readwrite')
    .objectStore('User')
    .add({
    id: 1,
    Name: '张三',
    QQ: '865110135'
    });

    request.onsuccess = function(event) {
    console.log('数据写入成功');
    };

    request.onerror = function(event) {
    console.log('数据写入失败');
    }
    },
    EditData: function() {
    ///<summary>
    ///编辑数据
    ///</summary>
    var request = db.transaction(['User'], 'readwrite')
    .objectStore('User')
    .put({
    id: 1,
    Name: 'tome',
    QQ: '865110135'
    });

    request.onsuccess = function(event) {
    console.log('数据更新成功');
    };

    request.onerror = function(event) {
    console.log('数据更新失败');
    }
    },
    ReadData: function() {
    ///<summary>
    ///获取单条数据
    ///</summary>
    //get(参数1) ; 参数1:键值
    var request = db.transaction(['User']).objectStore('User').get(1);
    request.onerror = function(event) {
    console.log('事务失败');
    };
    request.onsuccess = function(event) {
    if (request.result) {
    console.log('Name: ' + request.result.Name);
    console.log('QQ: ' + request.result.QQ);
    } else {
    console.log('未获得数据记录');
    }
    };
    },
    ReadAllData: function() {
    ///<summary>
    ///获取所有数据
    ///</summary>
    var objectStore = db.transaction(['User']).objectStore('User');
    objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
    console.log('Id: ' + cursor.key);
    console.log('Name: ' + cursor.value.Name);
    console.log('QQ: ' + cursor.value.QQ);
    cursor.continue();
    } else {
    console.log('没有更多数据了!');
    }
    };
    },
    DelData: function() {
    ///<summary>
    ///删除数据
    ///</summary>
    var request = db.transaction(['User'], 'readwrite')
    .objectStore('User')
    .delete(1); //删除主键为1的数据

    request.onsuccess = function(event) {
    console.log('数据删除成功');
    };
    },
    Clear: function() {
    ///<summary>
    ///清空数据
    ///</summary>
    var transaction = db.transaction(['User'], 'readwrite');
    var store = transaction.objectStore('User');
    store.clear();
    },
    DelObjectStore: function() {
    ///<summary>
    ///删除表[执行此全动作必须发生在版本变更动作中]
    ///</summary>
    db.deleteObjectStore('User');
    },
    DelDB: function() {
    ///<summary>
    ///删除库
    ///</summary>
    window.indexedDB.deleteDatabase("h5");
    }
    }
  • 相关阅读:
    Oracle修改字段类型
    JS解析JSON字符串
    C#Json转DataTable
    解决前台和后台传值出现中文乱码
    Oracle 存储过程简单语法
    EasyUI 冻结列
    EasyUI 数据网格行过滤
    windows计划任务
    C#日志文件
    bat 读取 ini 配置文件
  • 原文地址:https://www.cnblogs.com/tx720/p/9846977.html
Copyright © 2011-2022 走看看