101 lines
4.2 KiB
Markdown
101 lines
4.2 KiB
Markdown
# js storage
|
||
- ## js在客户端存储数据的方式
|
||
- Web Storage api：通常用来存储简单的数据，以name-value的形式存储
|
||
|
||
- ## Web Storage api
|
||
- 存储种类：
|
||
- localStorage
|
||
- 该种方式即使浏览器被关闭，数据仍然不会丢失，下次重新打开浏览器时数据仍然存在
|
||
- 无论刷新还是关闭页面，数据仍然不会丢失
|
||
- sessionStorage：
|
||
- 该种方式只会在浏览器打开时存储数据，一旦浏览器被关闭，存储的数据会消失
|
||
- 该方式存储的数据在刷新页面后仍然会存在，但是当页面关闭后，数据会丢失
|
||
- 存储信息和删除信息方式：
|
||
- localStorage：
|
||
```javascript
|
||
localStorage.setItem(name,value)
|
||
localStorage.getItem(name)
|
||
localStorage.removeItem(name)
|
||
```
|
||
- sessionStorage:
|
||
```javascript
|
||
sessionStorage.setItem(name,value)
|
||
sessionStorage.getItem(name)
|
||
session.removeItem(name)
|
||
```
|
||
- 对于不同的域名，Storage是分别储存的，位于同一域名下的页面可以共享Storage中存储的信息，但是位于不同域名的页面Storage信息无法共享
|
||
- ## indexedDB
|
||
- 数据库操作（数据库操作都是异步的，不必在数据库操作进行时阻塞，可以为数据库操作请求添加handler来处理完成的请求）
|
||
- 打开db：
|
||
```javascript
|
||
// 该方法会打开name指定的数据库，如果该数据库不存在，
|
||
// 会创建一个新的数据库
|
||
let db_request=window.indexedDB.open(name,version)
|
||
```
|
||
- 为数据库操作添加handler：
|
||
```javascript
|
||
// 可以为数据库操作添加success、error的handler
|
||
db_request.addEventHandler('success',handler)
|
||
db_request.addEventHandler('error',error_handler)
|
||
|
||
// 为upgradeneeded事件指定handler
|
||
// 如果一个数据库还没有被设置，或者该数据库打开
|
||
// 的版本号大于其本身版本号
|
||
db_request.addEventHnalder((e)=>{
|
||
db=e.target.result
|
||
obj_store=db.createObjectStore(name,{keyPath:"id",autoIncrement:true})
|
||
|
||
obj_store.createIndex(name,value,{unique:false})
|
||
})
|
||
```
|
||
- 如果打开数据库操作完成，会触发success事件，打开的数据库对象可以通过db_request.result来访问
|
||
- 如果打开数据库操作失败，会触发error事件
|
||
- 数据库如果没有被设置，会抛出upgradeneeded事件，并且upgradeneeded事件在success事件之前
|
||
- 向数据库的ObjectStore中添加记录：
|
||
- 首先要开启一个事务，通过db.transaction([objectStoreName...],mode:"readwrite")
|
||
```javascript
|
||
let tr=db.transaction([obj_store...],"readwrite")
|
||
```
|
||
- 通过事务获取object store对象
|
||
```javascript
|
||
let obj_store=tr.objectStore(obj_store)
|
||
```
|
||
- 调用add操作向object store中添加记录，并且为返回的request对象的事件添加监听器
|
||
```javascript
|
||
let add_request=obj_store.add({
|
||
key1:value1,
|
||
key2:value2,
|
||
...
|
||
})
|
||
// 为request的success事件添加handler
|
||
add_request.addEventHanlder('success',success_handler)
|
||
|
||
// 为transaction的complete事件添加handler
|
||
tr.addEventHandler('complete',handler)
|
||
// 为事务的error事件添加handler
|
||
tr.addEventHandler('error',err_handler)
|
||
```
|
||
- 遍历objectStore对象中的记录
|
||
```javascript
|
||
let object_store=db.transaction(object_store_name).objectStore(obj_store_name)
|
||
object_store.openCursor().addEventHandler('success',(e)=>{
|
||
// 获取request.result的结果值
|
||
const cursor=e.target.result
|
||
if(cursor) {
|
||
// 操作数据
|
||
|
||
// 迭代到下一个项目
|
||
// 如果还存在下一个记录，那么request的success
|
||
// 事件会再次被触发
|
||
cursor.continue()
|
||
}
|
||
})
|
||
```
|
||
- 删除objectStore中的记录
|
||
```javascript
|
||
objectStore.delete(primary_key)
|
||
tr.addEventHandler('complete',handler)
|
||
```
|
||
|
||
|