HTML5中的Indexed Database

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介:    Indexed Database一种在浏览器中通过JavaScript操作的功能的数据库,为同一个源执行的程序共享空间,在同一个源拥有的空间中可以创建多个数据库,而在1个数据库中又可以创建多个对象存储。

   Indexed Database一种在浏览器中通过JavaScript操作的功能的数据库,为同一个源执行的程序共享空间,在同一个源拥有的空间中可以创建多个数据库,而在1个数据库中又可以创建多个对象存储。  对象存储类似于mongDB中的数据集合。


  连接数据库:

var indexedDB = window.indexedDB ||
                           window.webkitIndexedDB ||
                           window.mozIndexedDB;

var db = null;

//连接数据库
var request = indexedDB.open('testdb');
//连接数据库成功
request.onsuccess = function(event) {
     //使用全局变量引用数据库
     db =event.target.result;
};
//连接数据库失败
request.onerror = function(event) {
     alert('连接数据库失败');
};

     创建对象存储:

    通过调用createObjectStore方法创建,该方法只能在数据库的版本更改事务中执行,setVersion方法后会自动开启该事务。

  

//更改DB版本
var request = db.setVersion('1.0');

request.onsuccess= function(event) {
    //创建对象存储
    var store = db.createObjectStore('books',{
           keyPath: '_id',
           autoIncrement:true
     });
}

     数据的添加、删除、引用

//获得事务对象
var IDBTransaction = window.IDBTransaction || window.webkitIdbTransaction;

//添加数据函数
function addData(data){
     var transaction = db.transaction(['books'],IDBTransaction.READ_WRITE);
    //添加数据,也可使用put
    var request = transaction.objectStore('books').add(data);
    request.onsuccess = function(event) {
        //若成功,返回键
        var key = event.target.result;
        console.log('success! key-> ',key);
    };
}

//数据引用
function getData(key) {
    //事务的开始
    var transaction = db.transaction(['books']);
    //数据的引用
    var request = transaction.objectStore('books').get(key);
    request.onsuccess = function(event) {
         var data= event.target.result;
         console.log('success data->',data);
   };
}
//数据的删除
function delData(key){
   //事务的开始
   var transaction = db.transaction(['books'],IDBtransaction.READ_WRITE);
   var request=transaction.objectStore('books').delete(key);
   
   request.onsuccess=function(event) { 
     console.log('delete success');
   };
}

   索引的创建:只能在数据库版本更改事务中进行索引的创建

var request =db.setVersion('1.1');

request.onsuccess=function(event) {
    var transaction = event.target.result;
    var store=transaction.objectStore('books');
    //创建索引
     var index=store.createIndex('index_name','column_name');
};

使用索引检索数据

var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;

//事务和对象存储
var transation=db.transaction(['books'],IDBTransaction.READ_WRITE);
var store=transaction.objectStore('books');

//创建指定范围对象10~100
var range=IDBKeyRange.bound('10','100');

//通过索引检索数据
var request=store.index('index_name').openCursor(range);

request.onsuccess=function(event) {
     //获取IDBCursor对象
    var cursor=event.target.result;
    //若数据存在
    if(cursor){
        var data =cursor.value;
        //更新数据
       data.name='hh';
       cursor.update(data);
       //cursor.delete删除该数据
       
       //检索下一条
       cursor.continue();
    }
};

事务的回滚

var request =index.openCursor(keyRange);
request.onsuccess=function(event) {
     var cursor=event.target.result;
     if(cursor) {
           //若有readonly标志
          if(cursor.value.readonly){
                var transaction =event.target.transaction;
                //回滚
                transaction.abort();
          }else {
                cursor.delete();
                cursor.continue();
           }
     }
};




 


相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
21天前
|
前端开发
HTML+CSS实现奇特的的企业官网效果
HTML+CSS实现奇特的的企业官网效果
HTML+CSS实现奇特的的企业官网效果
|
21天前
|
前端开发 JavaScript
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
|
2天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
12天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
8 1
|
15天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
21天前
|
前端开发 JavaScript
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
|
21天前
|
前端开发 JavaScript
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!