daily commit

2022-05-09 22:49:52 +08:00
parent daaa294d27
commit f589527822
4 changed files with 258 additions and 0 deletions
--- a/javascript/js
+++ b/javascript/js
@@ -0,0 +1,100 @@
+# 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)
+        ```
+
+