偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

前端百題斬之我從瀏覽器控制臺(tái)看到了五種存儲(chǔ)方式

作者：執(zhí)鳶者
存儲(chǔ) 存儲(chǔ)軟件
打開(kāi)瀏覽器的開(kāi)發(fā)者工具中的Application部分，可以看到瀏覽器支持五種存儲(chǔ)方式：localStorage、sessionStorage、IndexedDB、WebSQL、Cookie。

[[408517]]

打開(kāi)瀏覽器的開(kāi)發(fā)者工具中的Application部分，可以看到瀏覽器支持五種存儲(chǔ)方式：localStorage、sessionStorage、IndexedDB、WebSQL、Cookie。其中W3C 官方在 2011 年 11 月聲明已經(jīng)不再維護(hù) Web SQL Database 規(guī)范，所以本次主要討論另外的三類四種存儲(chǔ)方式：Cookie、Storage、IndexedDB。

24.1 Cookie

24.1.1 定義

Cookie是一個(gè)保存在瀏覽器中的簡(jiǎn)單的文本文件，該文件與特定的Web文檔關(guān)聯(lián)在一起，保存了該瀏覽器訪問(wèn)這個(gè)Web文檔時(shí)的信息，當(dāng)瀏覽器再次訪問(wèn)這個(gè)Web文檔時(shí)這些信息可供該文檔使用。(HTTP是無(wú)狀態(tài)的協(xié)議，即HTTP協(xié)議本身不對(duì)請(qǐng)求和響應(yīng)之間的通信狀態(tài)進(jìn)行保存，為了實(shí)現(xiàn)期望的保存狀態(tài)功能，引入了cookie技術(shù))

24.1.2 Cookie組成

在了解Cookie組成之前先了解一下Cookie的整個(gè)請(qǐng)求流程，這個(gè)流程分為兩類：一類是沒(méi)有Cookie信息狀態(tài)下的請(qǐng)求，另一類是存有Cookie狀態(tài)下的請(qǐng)求。

通過(guò)上面的流程圖可以看出，Cookie是在服務(wù)端生成的，經(jīng)過(guò)查詢資料了解到其是在從服務(wù)端發(fā)送的響應(yīng)報(bào)文內(nèi)的一個(gè)叫做Set-Cookie的首部字段信息，響應(yīng)報(bào)文中有該首部字段則通知客戶端保存Cookie，則Cookie的組成則跟Set-Cookie可以設(shè)置哪些值相關(guān)，目前主要有以下幾類：

  1. NAME=VALUE Cookie的名稱和值，其中NAME是唯一標(biāo)識(shí)cookie的名稱，不區(qū)分大小寫;VALUE是存儲(chǔ)在Cookie里的字符串值，該值必須經(jīng)過(guò)URL編碼。
  2. Domain=域名 Cookie有效的域，發(fā)送到這個(gè)域的所有請(qǐng)求都會(huì)包含對(duì)應(yīng)的Cookie。(若不指定則默認(rèn)為創(chuàng)建Cookie的服務(wù)器的域名)
  3. Path=PATH 請(qǐng)求URL中包含這個(gè)路徑才會(huì)把Cookie發(fā)送到服務(wù)器(若不指定則默認(rèn)為文檔所在的文件目錄)
  4. Expires=DATE Cookie的有效期，默認(rèn)情況下，瀏覽器會(huì)話結(jié)束后會(huì)刪除所有cookie。
  5. Secure 設(shè)置后僅在HTTPS安全通信時(shí)才會(huì)發(fā)送Cookie
  6. HttpOnly 設(shè)置后只能在服務(wù)器上讀取，不能再通過(guò)JavaScript讀取Cookie
  1. const express = require('express'); 
  2.  
  3. const app = express(); 
  4.  
  5. app.get('/', (req, res) => { 
  6.     res.cookie('myCookie', 'myCookie', { 
  7.         expires: new Date(Date.now() + 900000), 
  8.         secure: true, 
  9.         httpOnly: true 
  10.     }); 
  11.     res.send('get請(qǐng)求已經(jīng)被處理'); 
  12. }) 
  13. app.listen(8090, () => { 
  14.     console.log('8090端口已經(jīng)啟動(dòng)！?。?); 
  15. }); 

通過(guò)請(qǐng)求 http://127/.0.0.1:8090 來(lái)看看其結(jié)果：

第一次返回的Cookie結(jié)果

后續(xù)請(qǐng)求所帶的Cookie信息

24.1.3 Cookie特點(diǎn)

  1. 每個(gè)Cookie不超過(guò)4096字節(jié);
  2. 每個(gè)域中Cookie個(gè)數(shù)有限制，就拿最新版來(lái)說(shuō)：IE和Edge不超過(guò)50個(gè);Firefox不超過(guò)150個(gè);Opera不超過(guò)180個(gè);Safari和Chrome沒(méi)有限制;
  3. Cookie超過(guò)單個(gè)域的上限，瀏覽器會(huì)刪除之前設(shè)置的Cookie;
  4. 創(chuàng)建的Cookie超過(guò)最大限制，該Cookie會(huì)被靜默刪除;
  5. 可設(shè)置失效時(shí)間，沒(méi)有設(shè)置則會(huì)話結(jié)束會(huì)刪除Cookie;
  6. 每個(gè)請(qǐng)求均會(huì)攜帶Cookie，若Cookie過(guò)多會(huì)帶來(lái)性能問(wèn)題;
  7. 受同源策略限制

24.1.4 Cookie的操作

Cookie存儲(chǔ)到瀏覽器端之后仍然可以對(duì)其進(jìn)行讀、寫、刪除，由于js對(duì)Cookie操作的支持并不是很友好，所以需要進(jìn)行一些簡(jiǎn)單的封裝。

  1. class CookieUtil { 
  2.     // 獲取Cookie中的對(duì)應(yīng)屬性 
  3.     static get(name) { 
  4.         const cookies = document.cookie; 
  5.         const cookiesArr = cookies.split(';'); 
  6.         for (let index = 0; index < cookiesArr.length; index++) { 
  7.             const presentCookieArr = cookiesArr[index].split('='); 
  8.             if (presentCookieArr[0] === name) { 
  9.                 return presentCookieArr[1]; 
  10.             } 
  11.         } 
  12.  
  13.         return null; 
  14.     } 
  15.  
  16.     // 設(shè)置對(duì)應(yīng)的Cookie值 
  17.     static set(name, value, expires, path, domain, secure) { 
  18.         let cookieText = `${name}=${value}`; 
  19.         if (expires instanceof Date) { 
  20.             cookieText += `; expire=${expires.toGMTString()}`; 
  21.         } 
  22.         if (path) { 
  23.             cookieText += `; path=${path}`; 
  24.         } 
  25.         if (domain) { 
  26.             cookieText += `; domain=${domain}`; 
  27.         } 
  28.         if (secure) { 
  29.             cookieText += `; secure`; 
  30.         } 
  31.         document.cookie = cookieText; 
  32.     } 
  33.  
  34.     // 刪除對(duì)應(yīng)的Cookie 
  35.     static deleteCookie(name) { 
  36.         CookieUtil.set(name, '', new Date(0)); 
  37.     } 
  38. } 

24.2 Web Storage

Web Storage的目的是解決通過(guò)客戶端存儲(chǔ)不需要頻繁發(fā)送回服務(wù)器的數(shù)據(jù)時(shí)使用cookie的問(wèn)題，其提供了cookie之外的存儲(chǔ)會(huì)話數(shù)據(jù)的途徑和跨會(huì)話持久化存儲(chǔ)大量數(shù)據(jù)的機(jī)制，其主要有兩個(gè)對(duì)象：localStorage和sessionStorage，localStorage是永久存儲(chǔ)機(jī)制，sessionStorage是跨會(huì)話的存儲(chǔ)機(jī)制。

24.2.1 sessionStorage

sessionStorage是跨會(huì)話的存儲(chǔ)機(jī)制，具有以下特點(diǎn)：

  1. sessionStorage對(duì)象值存儲(chǔ)會(huì)話數(shù)據(jù)，其生命周期會(huì)存儲(chǔ)到瀏覽器關(guān)閉。(在該過(guò)程中刷新頁(yè)面其數(shù)據(jù)不受影響)
  2. 瀏覽器在實(shí)現(xiàn)存儲(chǔ)寫入時(shí)使用同步阻塞方式，數(shù)據(jù)會(huì)被立即提交到存儲(chǔ)。
  3. 獨(dú)立打開(kāi)同一個(gè)窗口同一個(gè)頁(yè)面或一個(gè)Tab，sessionStorage也是不一樣的。
  4. 存儲(chǔ)空間大小限制為每個(gè)源不超過(guò)5M。
  1. // 使用方法存儲(chǔ)數(shù)據(jù) 
  2. sessionStorage.setItem('sessionName1', 'value1'); 
  3. // 使用屬性存儲(chǔ)數(shù)據(jù) 
  4. sessionStorage.sessionName2 = 'value2'; 
  5.  
  6. // 使用方法取得數(shù)據(jù) 
  7. const sessionValue1 = sessionStorage.getItem('sessionName1'); 
  8. console.log('sessionValue1的值為：', sessionValue1); 
  9. // 使用屬性取得數(shù)據(jù) 
  10. const sessionValue2 = sessionStorage.sessionName2; 
  11. console.log('sessionValue2的值為：', sessionValue2); 
  12.  
  13. // 循環(huán)遍歷sessionStarage 
  14. for (let index = 0; index < sessionStorage.length; index++) { 
  15.     // 使用key()方法獲得指定索引處的名稱 
  16.     const key = sessionStorage.key(index); 
  17.     const value = sessionStorage.getItem(key); 
  18.     console.log('循環(huán)遍歷結(jié)果：', key, value); 
  19. } 
  20.  
  21. // 使用方法刪除值 
  22. sessionStorage.removeItem('sessionName1'); 
  23. // 使用delete刪除值 
  24. delete sessionStorage.sessionName2; 
  25.  
  26. // 使用clear()方法清空sessionStorage 
  27. sessionStorage.clear(); 

24.2.2 localStorage

localStorage是永久存儲(chǔ)機(jī)制，具有以下特點(diǎn)：

  1. 生命周期是永久的，除非被清除，否則永久保存。
  2. 存儲(chǔ)空間大小限制為每個(gè)源不超過(guò)5M。
  3. 受同源策略限制。
  4. 瀏覽器存儲(chǔ)時(shí)采用同步存儲(chǔ)方式。
  1. // 使用方法存儲(chǔ)數(shù)據(jù) 
  2. localStorage.setItem('localName1', 'value1'); 
  3. // 使用屬性存儲(chǔ)數(shù)據(jù) 
  4. localStorage.localName2 = 'value2'; 
  5.  
  6. // 使用方法取得數(shù)據(jù) 
  7. const localValue1 = localStorage.getItem('localName1'); 
  8. console.log('localValue1的值為：', localValue1); 
  9. // 使用屬性取得數(shù)據(jù) 
  10. const localValue2 = localStorage.localName2; 
  11. console.log('localValue2的值為：', localValue2); 
  12.  
  13. // 循環(huán)遍歷localStarage 
  14. for (let index = 0; index < localStorage.length; index++) { 
  15.     // 使用key()方法獲得指定索引處的名稱 
  16.     const key = localStorage.key(index); 
  17.     const value = localStorage.getItem(key); 
  18.     console.log('循環(huán)遍歷結(jié)果：', key, value); 
  19. } 
  20.  
  21. // 使用方法刪除值 
  22. localStorage.removeItem('localName1'); 
  23. // 使用delete刪除值 
  24. delete localStorage.localName2; 
  25.  
  26. // 使用clear()方法清空l(shuí)ocalStorage 
  27. localStorage.clear(); 

24.3 IndexedDB

24.3.1 IndexedDB整個(gè)結(jié)構(gòu)

對(duì)于整個(gè)IndexedDB為上述圖中所示：

一個(gè)域名下可以包含多個(gè)數(shù)據(jù)庫(kù);

一個(gè)數(shù)據(jù)庫(kù)中包含多個(gè)對(duì)象倉(cāng)庫(kù)，就類似與Mysql一個(gè)庫(kù)中有多張表一樣。

每個(gè)對(duì)象倉(cāng)庫(kù)中包含多條數(shù)據(jù)記錄。

24.3.2 主要特點(diǎn)

IndexedDB是瀏覽器中存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)的一個(gè)方案，其設(shè)計(jì)幾乎是完全異步的，主要有以下特點(diǎn)：

  1. 鍵值對(duì)存儲(chǔ) 在對(duì)象倉(cāng)庫(kù)中，數(shù)據(jù)以“鍵值對(duì)”形式保存，每個(gè)數(shù)據(jù)記錄都有獨(dú)一無(wú)二的主鍵。
  2. 異步 IndexedDB操作時(shí)不會(huì)鎖死瀏覽器，用戶依然可以進(jìn)行其它操作。
  3. 支持事務(wù) 一些列操作步驟之中只要有一步失敗，整個(gè)事務(wù)就都取消，數(shù)據(jù)庫(kù)回滾到事務(wù)發(fā)生之前的狀態(tài)，不存在只改寫一部分?jǐn)?shù)據(jù)的情況。
  4. 受同源策略限制 只能訪問(wèn)自身域名下的數(shù)據(jù)庫(kù)，不能跨域訪問(wèn)數(shù)據(jù)庫(kù)。
  5. 存儲(chǔ)空間大 每個(gè)源都有存儲(chǔ)空間的限制，而且這個(gè)限制跟瀏覽器有關(guān)，例如Firefox限制每個(gè)源50MB，Chrome為5MB。
  6. 支持二進(jìn)制存儲(chǔ) 不僅可以存儲(chǔ)字符串，還可以存儲(chǔ)二進(jìn)制數(shù)據(jù)(ArrayBuffer和Blob)

24.3.3 數(shù)據(jù)庫(kù)操作

IndexedDB像很多其它數(shù)據(jù)庫(kù)一樣有很多操作，下面就通過(guò)實(shí)戰(zhàn)的方式一起了解這些操作。

24.3.3.1 初始化數(shù)據(jù)庫(kù)

第一步是初始化數(shù)據(jù)庫(kù)，傳入創(chuàng)建的數(shù)據(jù)庫(kù)名和版本，獲取對(duì)應(yīng)的數(shù)據(jù)庫(kù)操作實(shí)例。

  1. class IndexedDBOperation { 
  2.   constructor(databaseName, version) { 
  3.       this.atabaseName = databaseName; 
  4.       this.version = version; 
  5.       this.request = null; 
  6.       this.db = null; 
  7.   } 
  8.  
  9.   // 數(shù)據(jù)庫(kù)初始化操作 
  10.   init() { 
  11.       this.request = window.indexedDB.open(this.databaseName, this.version); 
  12.       return new Promise((resolve, reject) => { 
  13.           this.request.onsuccess = event => { 
  14.               this.db = event.target.result; 
  15.               console.log('數(shù)據(jù)庫(kù)打開(kāi)成功'); 
  16.               resolve('success'); 
  17.           }; 
  18.           this.request.onerror = event => { 
  19.               console.log('數(shù)據(jù)庫(kù)打開(kāi)報(bào)錯(cuò)'); 
  20.               reject('error'); 
  21.           }; 
  22.           this.request.onupgradeneeded = event =>{ 
  23.               this.db = event.target.result; 
  24.               console.log('數(shù)據(jù)庫(kù)升級(jí)'); 
  25.               resolve('upgradeneeded'); 
  26.           }; 
  27.       }); 
  28.   } 
  29. } 

24.3.3.2 對(duì)象倉(cāng)庫(kù)操作

數(shù)據(jù)是在對(duì)象倉(cāng)庫(kù)中存儲(chǔ)的，創(chuàng)建好數(shù)據(jù)庫(kù)后則需要?jiǎng)?chuàng)建所需的數(shù)據(jù)倉(cāng)庫(kù)

  1. class IndexedDBOperation { 
  2.   // …… 
  3.   // 創(chuàng)建數(shù)據(jù)倉(cāng)庫(kù) 
  4.   createObjectStore(objectStoreName, options) { 
  5.       let objectStore = null; 
  6.       if (!this.db.objectStoreNames.contains(objectStoreName)) { 
  7.           objectStore = this.db.createObjectStore(objectStoreName, options); 
  8.       } 
  9.       return objectStore; 
  10.   } 
  11. } 

24.3.3.3 數(shù)據(jù)操作

不管是關(guān)系型數(shù)據(jù)庫(kù)還是非關(guān)系型數(shù)據(jù)庫(kù)，CURD肯定是必不可少的，誰(shuí)讓我們是“CURD工程師”呢!!!

  1. class IndexedDBOperation { 
  2.   // …… 
  3.   // 新增內(nèi)容 
  4.   add(objectStore, content) { 
  5.       objectStore.add(content); 
  6.   } 
  7.    
  8.   // 獲取內(nèi)容 
  9.   get(objectStore, id) { 
  10.       const request = objectStore.get(id); 
  11.       return new Promise((resolve, reject) => { 
  12.           request.onsuccess = resolve; 
  13.           request.onerror = reject; 
  14.       }); 
  15.   } 
  16.    
  17.   // 更新內(nèi)容 
  18.   update(objectStore, content) { 
  19.       const request = objectStore.put(content); 
  20.       request.onsuccess = event => { 
  21.           console.log('更新成功'); 
  22.       }; 
  23.       request.onerror = event => { 
  24.           console.log('更新失敗'); 
  25.       }; 
  26.   } 
  27.    
  28.   // 刪除內(nèi)容 
  29.   remove(objectStore, deleteId) { 
  30.       const request = objectStore.delete(deleteId); 
  31.       request.onsuccess = event => { 
  32.           console.log('刪除成功'); 
  33.       }; 
  34.       request.onerror = event => { 
  35.           console.log('刪除失敗'); 
  36.       }; 
  37.   } 
  38. } 

24.3.3.5 調(diào)用代碼

上面寫了一個(gè)數(shù)據(jù)庫(kù)的類，但是仍然不知道怎么調(diào)用呀，下面就用一個(gè)demo講述其調(diào)用。

  1. class IndexedDBOperation { 
  2.   // …… 
  3.   // 打印全部數(shù)據(jù) 
  4.   printAllDataByCursor(objectStore) { 
  5.       const cursorRequest = objectStore.openCursor(); 
  6.       cursorRequest.onsuccess = event => { 
  7.           const cursor = event.target.result; 
  8.           if (cursor) { 
  9.               console.log(`利用游標(biāo)打印的內(nèi)容，id為${cursor.key}, 值為${cursor.value}`); 
  10.               // 移動(dòng)到下一條記錄 
  11.               cursor.continue(); 
  12.           } 
  13.       }; 
  14.   } 
  15. } 

本文轉(zhuǎn)載自微信公眾號(hào)「執(zhí)鳶者」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系執(zhí)鳶者公眾號(hào)。

 

責(zé)任編輯：武曉燕 來(lái)源： 執(zhí)鳶者
瀏覽器存儲(chǔ)
相關(guān)推薦

2021-07-19 07:02:10

瀏覽器進(jìn)程單進(jìn)程瀏覽器

2021-07-14 07:00:53

瀏覽器技巧前端

2021-11-03 06:57:41

瀏覽器Jsonp安全

2021-07-08 07:01:53

瀏覽器安全前端

2021-07-26 05:01:55

瀏覽器渲染流程

2021-05-12 07:04:55

Js變量方式

2013-07-15 10:25:27

2013-08-16 10:12:57

C編程風(fēng)格

2021-10-19 22:23:05

typeof方式Instanceof

2021-05-09 22:00:59

TypeofInstanceof運(yùn)算符

2017-06-15 08:52:36

數(shù)據(jù)分析可視化軟件開(kāi)發(fā)

2021-05-19 07:02:42

JS對(duì)象方法

2020-09-20 17:50:38

編程語(yǔ)言PythonJava

2021-07-26 06:57:58

重繪回流前端

2021-12-03 06:59:23

操作符驗(yàn)證點(diǎn)屬性

2022-12-26 00:00:02

數(shù)據(jù)驅(qū)動(dòng)業(yè)務(wù)

2013-11-15 13:22:22

瀏覽器JavaScript

2021-06-28 07:12:28

賦值淺拷貝深拷貝

2021-06-28 13:20:15

谷歌AI芯片

2021-06-16 07:03:37

New操作符函數(shù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)