顺德建设幼儿院报名网站,成都网站模板,12306网站建设花了多少钱,大气的企业网站源码WebStorage主要提供了一种机制#xff0c;可以让浏览器提供一种比cookie更直观的key、value存储方式#xff1a;
localStorage#xff1a;本地存储#xff0c;提供的是一种永久性的存储方法#xff0c;在关闭掉网页重新打开时#xff0c;存储的内容依然保留#xff1b;…WebStorage主要提供了一种机制可以让浏览器提供一种比cookie更直观的key、value存储方式
localStorage本地存储提供的是一种永久性的存储方法在关闭掉网页重新打开时存储的内容依然保留 sessionStorage会话存储提供的是本次会话的存储在关闭掉会话时存储的内容会被清除 localStorage和sessionStorage的区别
我们会发现localStorage和sessionStorage看起来非常的相似。 那么它们有什么区别呢
验证一关闭网页后重新打开localStorage会保留而sessionStorage会被删除验证二在页面内实现跳转localStorage会保留sessionStorage也会保留验证三在页面外实现跳转打开新的网页localStorage会保留sessionStorage不会被保留
Storage常见的方法和属性
属性 Storage.length只读属性 返回一个整数表示存储在Storage对象中的数据项数量 方法
Storage.key()该方法接受一个数值n作为参数返回存储中的第n个key名称Storage.getItem()该方法接受一个key作为参数并且返回key对应的valueStorage.setItem()该方法接受一个key和value并且将会把key和value添加到存储中。如果key存储则更新其对应的值Storage.removeItem()该方法接受一个key作为参数并把该key从存储中删除Storage.clear()该方法的作用是清空存储中的所有key
// 1.setItem
localStorage.setItem(name, coderwhy)
localStorage.setItem(age, 18)// 2.length
console.log(localStorage.length)
for (let i 0; i localStorage.length; i) {const key localStorage.key(i)console.log(localStorage.getItem(key))
}// 3.key方法
console.log(localStorage.key(0))// 4.getItem(key)
console.log(localStorage.getItem(age))// 5.removeItem
localStorage.removeItem(age)// 6.clear方法
localStorage.clear()封装Storage
在开发中为了让我们对Storage使用更加方便我们可以对其进行一些封装
class HYCache {constructor(isLocal true) {this.storage isLocal ? localStorage: sessionStorage}setItem(key, value) {if (value) {this.storage.setItem(key, JSON.stringify(value))}}getItem(key) {let value this.storage.getItem(key)if (value) {value JSON.parse(value)return value} }removeItem(key) {this.storage.removeItem(key)}clear() {this.storage.clear()}key(index) {return this.storage.key(index)}length() {return this.storage.length}
}const localCache new HYCache()
const sessionCache new HYCache(false)export {localCache,sessionCache
}认识IndexedDB
什么是IndexedDB呢
我们能看到DB这个词就说明它其实是一种数据库Database通常情况下在服务器端比较常见 在实际的开发中大量的数据都是存储在数据库的客户端主要是请求这些数据并且展示 有时候我们可能会存储一些简单的数据到本地浏览器中比如token、用户名、密码、用户信息等比较少存储大量的数据 那么如果确实有大量的数据需要存储这个时候可以选择使用IndexedDB
IndexedDB是一种底层的API用于在客户端存储大量的结构化数据。
它是一种事务型数据库系统是一种基于JavaScript面向对象数据库有点类似于NoSQL非关系型数据库 IndexDB本身就是基于事务的我们只需要指定数据库模式打开与数据库的连接然后检索和更新一系列事务即可 IndexDB的连接数据库
第一步打开indexDB的某一个数据库
通过indexDB.open(数据库名称, 数据库版本)方法 如果数据库不存在那么会创建这个数据 如果数据库已经存在那么会打开这个数据库
第二步通过监听回调得到数据库连接结果 数据库的open方法会得到一个IDBOpenDBRequest类型 我们可以通过下面的三个回调来确定结果
onerror当数据库连接失败时onsuccess当数据库连接成功时回调onupgradeneeded当数据库的version发生变化并且高于之前版本时回调
通常我们在这里会创建具体的存储对象db.createObjectStore(存储对象名称, { keypath: 存储的主键 }) 我们可以通过onsuccess回调的event获取到db对象event.target.result
我们对数据库的操作要通过事务对象来完成 第一步通过db获取对应存储的事务 db.transaction(存储名称, 可写操作) 第二步通过事务获取对应的存储对象 transaction.objectStore(存储名称)
接下来我们就可以进行增删改查操作了
新增数据 store.add查询数据 方式一store.get(key) 方式二通过 store.openCursor 拿到游标对象 在request.onsuccess中获取cursorevent.target.result获取对应的keycursor.key获取对应的valuecursor.value可以通过cursor.continue来继续执行 修改数据 cursor.update(value)删除数据 cursor.delete()
// 打开数据(和数据库建立连接)
const dbRequest indexedDB.open(why, 3)
dbRequest.onerror function(err) {console.log(打开数据库失败~)
}
let db null
dbRequest.onsuccess function(event) {db event.target.result
}
// 第一次打开/或者版本发生升级
dbRequest.onupgradeneeded function(event) {const db event.target.resultconsole.log(db)// 创建一些存储对象db.createObjectStore(users, { keyPath: id })
}class User {constructor(id, name, age) {this.id idthis.name namethis.age age}
}const users [new User(100, why, 18),new User(101, kobe, 40),new User(102, james, 30),
]// 获取btns, 监听点击
const btns document.querySelectorAll(button)
for (let i 0; i btns.length; i) {btns[i].onclick function() {const transaction db.transaction(users, readwrite)console.log(transaction)const store transaction.objectStore(users)switch(i) {case 0:console.log(点击了新增)for (const user of users) {const request store.add(user)request.onsuccess function() {console.log(${user.name}插入成功)}}transaction.oncomplete function() {console.log(添加操作全部完成)}breakcase 1:console.log(点击了查询)// 1.查询方式一(知道主键, 根据主键查询)// const request store.get(102)// request.onsuccess function(event) {// console.log(event.target.result)// }// 2.查询方式二:const request store.openCursor()request.onsuccess function(event) {const cursor event.target.resultif (cursor) {if (cursor.key 101) {console.log(cursor.key, cursor.value)} else {cursor.continue()}} else {console.log(查询完成)}}breakcase 2:console.log(点击了删除)const deleteRequest store.openCursor()deleteRequest.onsuccess function(event) {const cursor event.target.resultif (cursor) {if (cursor.key 101) {cursor.delete()} else {cursor.continue()}} else {console.log(查询完成)}}breakcase 3:console.log(点击了修改)const updateRequest store.openCursor()updateRequest.onsuccess function(event) {const cursor event.target.resultif (cursor) {if (cursor.key 101) {const value cursor.value;value.name currycursor.update(value)} else {cursor.continue()}} else {console.log(查询完成)}}break}}
}
