indexDB 前端操作

indexDB

是一种低级api ，用于客户端存储大量结构化数据。该api使用索引来实现对该数据的高性能搜索。
为应用提供离线版本

indexdb 特点

键值存储。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>cookie/localStorage/sessionStorage</title>
</head>
<body><script>// cookiedocument.cookie = "name=qiphon"document.cookie = "gender=male"// console.log(document.cookie)// localStorage(sessionStorage 的api与localStorage相同)// if(window.localStorage){//     localStorage.setItem('name','qiphon')//     localStorage.setItem('age',25)//     console.log(localStorage.getItem('name'))//     console.log(localStorage.getItem('age'))// }// indexDBfunction openDB(name,cb){var db = window.indexedDB.open(name)var db1;db.onerror = function(event){//error事件表示打开数据库失败。console.log(event)}db.onsuccess = function(event){//success事件表示成功打开数据库。// console.log(event)db1 = event.target.resultcb(db1)}db.onupgradeneeded = function(event){  // 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。// 监听版本变化 (只有版本变化的时候才能createObjectStore)console.log(event)let db = event.target.result;if(!db.objectStoreNames.contains('persion')){// 判断表格是否存在// 创建对象仓库 (keyPath 主键)var store = db.createObjectStore('person', { keyPath: 'id' });// 如果没有合适的主键，可以选择自动生成主键// var objectStore = db.createObjectStore('person',{ autoIncrement:true});// 三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。var titleIndex = store.createIndex('by_title','title',{unique:true})store.put({title:'the world',author:'Mr Jhon',id:0})store.put({title:'the world2',author:'Mr Jhon',id:1})}}}openDB('qiphon',function(db){setTimeout(function(){dbData(db)},2000)})// 读取数据function dbData(db){console.log(db)// 增删数据记录，需要通过事务完成var transaction = db.transaction('person','readwrite')var store = transaction.objectStore('person')// 获取数据// var req = store.get(1)// req.onsuccess = function(event){//     console.log(event.target.result)// }// 添加数据// store.add({//     title:'new world',//     id:3// })// 删除数据// store.delete(1)// 更新数据// store.get(0).onsuccess = function(event){//     books = event.target.result;//     console.log(books)//     books.author = 'James'//     store.put(books).onsuccess = function(event){//         console.log('update',event)//     }// }// 遍历所有数据// store.openCursor().onsuccess = function(event){//     var cursor = event.target.result;//     if(cursor){//         console.log(cursor)//         cursor.continue()//     }else{//         console.log('not anything yet')//     }// }// 通过索引查找var index = store.index('by_title')var req = index.get('the world')req.onsuccess = function(event){var result = event.target.result;console.log(result)}}</script>
</body>
</html>

indexDB 前端操作相关推荐

钉钉免登陆前端操作详解
在钉钉免登陆中,前端操作是很重要的,因为在前端我们需要调用钉钉的jsapi来获取code,而这个code值是至关重要的.所以我再次清清楚楚的解析一遍前端的操作.下面的是我写的demo,我讲以这个de ...
使用redis实现防止重复提交，成功解决方案春风化作秋雨 2018-09-13 18:09:52 13787 收藏 6 分类专栏：解决方案版权 1、业务场景业务开发中，常常涉及对前端操作
使用redis实现防止重复提交,成功解决方案 1.业务场景业务开发中,常常涉及对前端操作进行重复校验,避免重复提交造成数据重复操作.比如转账操作,因为网络卡顿,客户连续点击转账按钮,造成多次转成:又 ...
php indexdb,前端存储 (4) - IndexDB
IndexDB的出现是为了存储更大量的结构化数据简介 IndexedDB是一个事务型数据库系统,类似于基于SQL的RDBMS. 然而不同的是它使用固定列表(只有 key,value),Indexe ...
php是做前端还是后端,在后端准备数据还是在前端操作？ - php
好的,我会尽量保持简洁(我倾向于胡扯). 我正在制作与电影相关的Web应用程序,因此正在向我的应用程序的后端(PHP)发出AJAX请求,它正在向我返回数据.此刻,我将完整的JSON返回我的前端(jQu ...
dynamic 365 前端操作
dynamic 365 常用js操作和方法 dynamic 365 常用js dynamic 365 常用js //获取当前用户id Xrm.Page.context.getUserId(): //获 ...
京东 PC 首页 2019 改版前端操作总结
距离上次首页改版,已有2年3个月零五天.相比上次改版对首页整体框架.开发流程的大刀阔斧(前两次改版总结传送门:2016版,2017版),这次的改版看起来显得有点像跳水--没什么水花.在站在巨人肩膀上的 ...
jquery-学生列表增删编辑，纯前端操作
>编写思路,题目素材 <!DOCTYPE html>  <html lang="zh-CN"> <he ...
table 列表前端操作保留状态，实现来回切换返显
使用场景: table 列表中用户操作时改变记录状态时,不实时调接口,切换到别的页数能来回返显操作过的状态,最后通过提交按钮一起提交 $set使用解决如果在实例创建之后修改属性状态到实例上,它不会 ...
前端操作pdf文件实现添加水印效果
在 Vue 中集成pdf-lib ,实现给 PDF文件添加水印需求详解前端下载或预览 PDF 文件的时候,需要加上水印,用于保护机密信息并表明法律文件的有效性插件介绍 pdf-lib :在任何 ...

indexDB 前端操作

indexDB

indexDB 前端操作相关推荐

最新文章

热门文章