js storage

js在客户端存储数据的方式
- Web Storage api：通常用来存储简单的数据，以name-value的形式存储
Web Storage api
- 存储种类：
  - localStorage
    - 该种方式即使浏览器被关闭，数据仍然不会丢失，下次重新打开浏览器时数据仍然存在
    - 无论刷新还是关闭页面，数据仍然不会丢失
  - sessionStorage：
    - 该种方式只会在浏览器打开时存储数据，一旦浏览器被关闭，存储的数据会消失
    - 该方式存储的数据在刷新页面后仍然会存在，但是当页面关闭后，数据会丢失
- 存储信息和删除信息方式：
  - localStorage：
```
localStorage.setItem(name,value)
localStorage.getItem(name)
localStorage.removeItem(name)
```
  - sessionStorage:
```
sessionStorage.setItem(name,value)
sessionStorage.getItem(name)
session.removeItem(name)
```
- 对于不同的域名，Storage是分别储存的，位于同一域名下的页面可以共享Storage中存储的信息，但是位于不同域名的页面Storage信息无法共享

indexedDB

数据库操作（数据库操作都是异步的，不必在数据库操作进行时阻塞，可以为数据库操作请求添加handler来处理完成的请求）

打开db：

// 该方法会打开name指定的数据库，如果该数据库不存在，
// 会创建一个新的数据库
let db_request=window.indexedDB.open(name,version)

为数据库操作添加handler：

// 可以为数据库操作添加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")
```
let tr=db.transaction([obj_store...],"readwrite")
```

通过事务获取object store对象

let obj_store=tr.objectStore(obj_store)

调用add操作向object store中添加记录，并且为返回的request对象的事件添加监听器

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对象中的记录

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中的记录

objectStore.delete(primary_key)
tr.addEventHandler('complete',handler)

4.3 KiB Raw Permalink Blame History Unescape Escape

js storage

js在客户端存储数据的方式

Web Storage api

indexedDB

4.3 KiB

Raw Permalink Blame History