1.背景
2.localStorage（本地存储）
| setItem(key,value) |
保存数据 |
| getItem(key) |
获取数据 |
| removeItem(key) |
移出数据 |
| clear() |
移出全部数据 |
| key(n) |
获取第n个值，n为整数 |
3.sessionStorage（窗口存储）
4.indexedDB（数据库）
<script>
let request = window.indexedDB.open('stu','1.1'); // 创建数据库
request.onerror = function(){ // 创建失败事件
console.log('创建数据库失败')
}
request.onsuccess = function(e){ // 创建成功事件
console.log('创建数据库成功')
let db = e.target // e.target 指向该请求（也就是指向创建的数据库）
console.log(db.result); // 获取IDBDatabase对象，这个对象很重要，我们可以通过该对象可以获取数据库的各种信息如，数据库名、版本号等
}
</script>TIP：
区别e.target和this
当一个元素里面包裹了子元素，那么点击子元素会触发“冒泡”，这个时候this指向绑定的父元素，而非子元素
而就算存在“冒泡”行为，但是e.target依旧指向点击的那个子元素
总结：用e.target会指向点击的那个元素，而this则不一定，可能会指向别的元素
如下图
5.操作“对象仓库”（表）
<script>
let request = window.indexedDB.open('wtu','1.0');
request.onerror = function(){
console.log('创建数据库失败');
}
request.onsuccess = function(){
console.log('创建数据库成功');
}
request.onupgradeneeded = function(e){ // request的第三个事件，用于创建一个“对象仓库”，也就是一张表
let db = e.target.result // 获取 IDBDatabase对象
// 如果数据库中不包含该对象仓库，也就是没有这张表，则创建新的对象仓库，也就是新建一张表
if(!db.objectStoreNames.contains('stu_01')){ // db.objectStoreNames.contains('对象仓库') // contains检测对应字符串里面是否包含指定字符串或者字符
// 创建表的格式：db.createObjectStore('对象仓库名'，{keyPath:'主键名'})
let store = db.createObjectStore('stu_o1',{keyPath:'id'}) // 注意：这个keyPath的p是大写
for(let i = 0;i < store.length;i++){
let addRequest = store.add(data[i]);
// addRequest对象也有两个事件
addRequest.onerror = function(){
console.log('创建对象仓库失败');
}
addRequest.onsuccess = function(){
console.log('创建对象仓库成功')
}
}
}else{
console.log('该对象仓库已经存在')
}
}
</script>6.对象仓库的“增删改查”
<script>
let data = [
{
id:1004,
name:'zs',
sex:'男'
},
{
id:1005,
name:'ls',
sex:'女'
},
{
id:1006,
name:'kangkang',
sex:'男'
}
]
let request = window.indexedDB.open('stu','1.0');
request.onerror = function(){
console.log('创建数据库失败');
}
request.onsuccess = function(e){
// 1.获取IDBDatabase对象，记住一切indexedDB都是基于这个对象，所以必须先获取
let db = e.target.result
// 2.开启事务（格式：db.transaction(['对象仓库名'],'事务模式')） 事务模式有两种：1.read 只读 2.readwrite 读写
let transaction = db.transaction(['stu_o2'],'readwrite');
// 3.连接到对象仓库
let store = transaction.objectStore('stu_o2');
// 4.添加新数据
for(let i = 0;i < data.length;i++){
let dataRequest = store.add(data[i])
dataRequest.onerror = function(){
console.log('添加失败')
}
dataRequest.onsuccess = function(){
console.log('添加成功')
}
}
}
</script>
let request = window.indexedDB.open('stu','1.0');
request.onerror = function(){
console.log('创建数据库失败');
}
request.onsuccess = function(e){
// 1.获取IDBDatabase对象，记住一切indexedDB都是基于这个对象，所以必须先获取
let db = e.target.result
// 2.开启事务（格式：db.transaction(['对象仓库名'],'事务模式')） 事务模式有两种：1.read 只读 2.readwrite 读写
let transaction = db.transaction(['stu_o2'],'readwrite');
// 3.连接到对象仓库
let store = transaction.objectStore('stu_o2');
let dataRequest = store.delete(1001)
dataRequest.onerror = function(){
console.log('删除数据失败');
}
dataRequest.onsuccess = function(){
console.log('删除数据成功')
}
}let request = window.indexedDB.open('stu','1.0');
request.onerror = function(){
console.log('创建数据库失败');
}
request.onsuccess = function(e){
// 1.获取IDBDatabase对象，记住一切indexedDB都是基于这个对象，所以必须先获取
let db = e.target.result
// 2.开启事务（格式：db.transaction(['对象仓库名'],'事务模式')） 事务模式有两种：1.read 只读 2.readwrite 读写
let transaction = db.transaction(['stu_o2'],'readwrite');
// 3.连接到对象仓库
let store = transaction.objectStore('stu_o2');
let dataRequest = store.get(1002)
dataRequest.onerror = function(){
console.log('查询数据失败');
}
dataRequest.onsuccess = function(){
console.log(this.result)
}
}let request = window.indexedDB.open('stu','1.0');
request.onerror = function(){
console.log('创建数据库失败');
}
request.onsuccess = function(e){
// 获取IDBDatabase对象，记住一切indexedDB都是基于这个对象，所以必须先获取
let db = e.target.result
// 开启事务（格式：db.transaction(['对象仓库名'],'事务模式')） 事务模式有两种：1.read 只读 2.readwrite 读写
let transaction = db.transaction(['stu_o2'],'readwrite');
// 连接到对象仓库
let store = transaction.objectStore('stu_o2');
// 需要修改的数据
let value = {
id:1002,
name:'hd',
sex:'女'
}
let dataRequest = store.put(value) // 将表中对应id的值修改成我们传过去的
dataRequest.onerror = function(){
console.log('修改数据失败');
}
dataRequest.onsuccess = function(){
console.log("修改数据成功")
}
}let request = window.indexedDB.open('stu','1.0');
request.onerror = function(){
console.log('创建数据库失败');
}
request.onsuccess = function(e){
// 获取IDBDatabase对象，记住一切indexedDB都是基于这个对象，所以必须先获取
let db = e.target.result
// 开启事务（格式：db.transaction(['对象仓库名'],'事务模式')） 事务模式有两种：1.read 只读 2.readwrite 读写
let transaction = db.transaction(['stu_o2'],'readwrite');
// 连接到对象仓库
let store = transaction.objectStore('stu_o2');
let dataRequest = store.clear();
dataRequest.onerror = function(){
console.log('删除数据失败');
}
dataRequest.onsuccess = function(){
console.log('删除数据成功')
}
}7.总结
| setItem(key,value) |
保存数据 |
| getItem(key) |
获取数据 |
| removeItem(key) |
移出数据 |
| clear() |
移出全部数据 |
| key(n) |
获取第n个值，n为整数 |