Stroage

stroage 提供了访问域名下的会话存储和本地存储的功能。比如增加、修改、删除、清空。

localStroage、sessionStroage 对象继承自该接口，同样可以使用stroage的方法。

localStroage:

一个域名下的本地存储
存储的数据可以长久保留，需要手动删除
相同源的情况下，local中的数据可以被多个同源标签页共享
stroage事件只能在其他标签页被触发，本页面无

sessionoStorage:
一个域名的会话存储
存储在sessionStore的数据当页面被关闭时，数据会被清空。
在相同源的情况下，session中的数据不会被多个标签页共享
无法触发stroag事件，因为session不可被共享

Stroage Methods

key()

该方法接受要给数值n为参数，返回存储中的第n个键名。(从上往下)

getItem()

使用一个key获取对应的值

setItem()

使用一个key-value，对存储对象添加或修改一个新的值

remove()

使用一个key值，从存储中删除

clear()

清空存储中所有的键名和值

Stroage Event

全局事件，在stroage变化时触发，可以手动加码，让两个实例对象变成多个标签页共享存储

触发的条件：

同一个源打开了两个页面
A页面触发了事件
B页面监听了事件
```
globalThis.addEventListener("storage", evl => {
 console.log(evl);
})
```
| 属性名 | 类型 | 描述 | | —- | —- | —- | | key | string | 该属性代表被修改的键值。当被clear()方法清除之后该属性值为null。（只读） | | newValue | string | 该属性代表修改后的新值。当被clear()方法清理后或者该键值对被移除，newValue 的值为 null 。（只读） | | oldValue | string | 该属性代表修改前的原值。在设置新键值对时由于没有原始值，该属性值为 null。（只读） | | storageArea | storage | 被操作的storage对象。（只读） | | url | string | key 发生改变的对象所在文档的URL地址。（只读） |

IndexedDB

IndexedDB 是一种在用户浏览器中持续存储数据的一种方式。因为它允许您创建具有丰富查询能力的 Web 应用程序，而不管网络可用性如何，因此您的应用程序可以联机和脱机工作

IndexedDB 始终是异步的，

IndexedDB又如下模式步骤:

打开数据库
在数据库中创建对象存储
启动事务并请求执行某些数据库操作，如添加或者检索数据
通过侦听正确的DOM事件等待操作完成
对结果进行一些操作（可以在请求对象上找到）

创建数据库
在创建数据考试之前首先要打开数据库，打开当前没有的数据库就会创建
indexedDB.open 方法，会返回一个IDBOpenDBRequest对象，该对象上会有在某一步事件发生时调用的回调函数 ```javascript const request = window.indexedDB.open(“base”, 1)

request.onerror = function (ent) { console.log(“打开出错”); }

request.onsuccess = function (ev) { console.log(“数据库打开成功”); }

request.addEventListener(“success”, function (event) { console.log(“数据库打开成功, addEventListener”); })

// 以上会输出打开成功

![image.png](https://cdn.nlark.com/yuque/0/2020/png/2455855/1608347451605-52f71983-7bed-4ee3-8cc3-66a70068da0d.png#height=203&id=qw7rT&margin=%5Bobject%20Object%5D&name=image.png&originHeight=203&originWidth=246&originalType=binary&ratio=1&size=5562&status=done&style=none&width=246)<br />浏览器中会显示刚打开过的数据库名字。 现在dbStroe里已经又了base数据库.下面就是创建表
```javascript
function open() {
  return new Promise((resolve, reject) => {
    const request = window.indexedDB.open("base", 1)
    request.onerror = function (ent) {
      console.log("打开出错");
    }
    request.onsuccess = function (ev) {
      resolve(request.result);
      console.log("数据库打开成功");
    }
    request.onupgradeneeded = function (event) {
      console.log("被打开， onupgradeneeded");
      let createStore = event.target.result;
      if (!createStore.objectStoreNames.contains("info_tbl")) {
        createStore.createObjectStore("info_tbl", { keyPath: "key" });
      }
    };
  })
  }

onupgradeneeded 回调只在数据库被打开的时候被调用。也是唯一创建表的地方
objectStoreNames 一个对象
- contains 用于判断当前list中是否包含每一张表，如果又返回true
- item 没啥用
createObjectStroe 用于创建一张表
- keypath 用于指定当前表的的主键
- autoIncreament 用于指定某个键的自增
createIndex 方法用于创建索引
- index 方法用于返回当前索引所在的条目，get方法只能按照简明读取数据，而不能按照属性读取。get方法可能会返回多个数据对象，因为当前属性没有唯一值
  删除数据库
在返回实例上有 deleteObjectStore 方法，用于删除指定的数据库

删除表

数据库返回实例

transction 该方法用于创建一个数据库事务，向数据库添加之前，必须先创建数据库事务

第一个参数是所涉及到的的对象仓库，可以是一个数组。第二个添加数据使用readwrite，读取数据使用readonly

该方法返回一个事务对象，该对象的 objectStore 方法用于获取指定的对象仓库

abort: 事务终端
complete: 事务完成

error：事务出错

增加

db.transaction("info_tbl", "readwrite") // 要操作的表
.objectStore("info_tbl")
.add({ id: 23, key: "key1", info: "消息1" })

add 方法可以添加数据，第二个参数为指定的键名(key)，如果创建仓库时已经做的设置，可以不用指定。该方法是异步的，有自己的回调

删除
```
let store = await db.transaction("info_tbl", "readwrite").objectStore("info_tbl");
store.delete("keyName")
```

更新

 let store = await db.transaction("info_tbl", "readwrite").objectStore("info_tbl");

store.put({ id: 23, key: "pp2" }) //目前会把之前的info属性更新掉。

如果创建表时指定了key，put方法仍然不添加第二个参数
如果当前更新的key值不存在会创建一条新的记录
查询
```javascript let res = await db.transaction(“info_tbl”, “readwrite”).objectStore(“info_tbl”).get(“pp2”)

res.onsuccess = e => { console.log(e.target.result); }

<a name="y5kZy"></a>
### 使用索引
```javascript
let tbl = await db.transaction("info_tbl", "readwrite")
                  .objectStore("info_tbl")
                  .index("id")
let res = await tbl.get(23);

res.onsuccess = function (e) {
   console.log(e.target.result);
}

使用索引获取时get方法仍然有自己的回调，只能在success函数中获取到查询的结果

Web Sql

……

JavaScript

Web Store