版权声明:多总结,帮助自己的同时也在帮助别人!留下意见和看法,让技术动起来! https://blog.csdn.net/qiphon3650/article/details/83017148
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>
// cookie
document.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'))
// }
// indexDB
function 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.result
cb(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>