JavaScript基礎知識總結 15：JavaScript客戶端存儲
目錄
一、cookie
1、限制
2、cookie的構成
二、Web Storage
三、sessionStorage對象
四、localStorage對象
五、IndexedDB
1、數據庫
2、對象存儲
3、事務
4、插入對象
5、通過游標查詢
6、索引
六、總結
七、JavaScript思維導圖
一、cookie
HTTP cookie通常也叫作cookie，最初用于在客戶端存儲會話信息。這個規范要求服務器在響應HTTP請求時，通過發送Set-Cookie HTTP頭部包含會話信息。
1、限制
cookie是與特定域綁定的，設置cookie后，它會與請求一起發送到創建它的域。這個限制能保證cookie中存儲的信息只對唄認可的接受者開發，不被其它域訪問。
因為cookie存儲在客戶端機器上，所以為保證它不會被惡意利用，瀏覽器會施加限制。同時cookie也不會占用太多磁盤空間。
2、cookie的構成
名稱，唯一標識cookie的名稱；
值，存儲在cookie里的字符串值；
域，cookie有效的域；
路徑，請求URL中包含這個路徑才會把cookie發送到服務器；
過期時間，標識何時刪除cookie的時間戳；
安全標志，設置過后，只在使用SSL安全連接的情況下會把cookie發送到服務器；
二、Web Storage
Web Storage定義了兩個對象：
localStorage
sessionStorage
Storage類型用于保存名/值對數據，直至存儲空間上限（由瀏覽器決定）。Storage 的實例與其他對象一樣，但增加了以下方法：
clear()，刪除所有的值；
getItem(name)，取得給定name的值；
key(index)，取得給定數值位置的名稱；
removeItem(name)，刪除給定name的名/值對；
setItem(name,value)，設置給定name的值；
三、sessionStorage對象
sessionStorage對象只存儲會話數據，這意味著數據只會存儲到瀏覽器關閉。這跟瀏覽器關閉時會消失的會話cookie類似。存儲在sessionStorage中的數據不受頁面刷新的影響，可以在瀏覽器崩潰并重啟后恢復。
因為sessionStorage對象與服務器會話緊密相關，所以在運行本地文件時不能使用，存儲在sessionStorage對象中的數據只能由最初存儲數據的頁面使用，在多頁應用程序中的用處有限。
因為sessionStorage對象是Storage的實例，所以可以通過使用setItem()方法或直接給屬性賦值給它添加數據。
四、localStorage對象
在修訂的HTML5中，localStorage對象取代了globalStorage，作為客戶端持久存儲數據的機制。要訪問同一個localStorage對象，頁面必須來自同一個域、在相同的端口上使用相同的協議。
因為localStorage是Storage的實例，所以可以像sessionStorage一樣使用localStorage。
五、IndexedDB
1、數據庫
Indexed Database API 簡稱IndexedDB，是瀏覽器中存儲數據結構化數據的一個方案。IndexedDB用于代替目前已廢棄的Web SQL Database API。IndexedDB背后的思想是創造一套API，方便JavaScript對象的存儲和獲取，同時也支持查詢和搜索。
IndexedDB的設計幾乎完全是異步的。
IndexedDB是類似于MySQL的數據庫，與傳統數據庫的最大差別在于，IndexedDB使用對象存儲而不是表格存儲數據。IndexedDB數據庫就是一個在公共命名空間下的一組對象存儲，類似于NoSQL風格的實現。
使用IndexedDB數據庫的第一步是調用indexedDB.open()方法，并給它傳入一個要打開的數據庫名稱。如果給定名稱的數據庫已經存在，則會發送一個打開它的請求；如果不存在，則會發送創建并打開這個數據庫的請求。這個方法會返回IDBRequest的實例，可以在這個實例上添加onerror和onsuccess事件處理程序。
let db,request,version = 1; request = indexedDB.open("admin",version); request.onerror = (event) => alert(`Failed to open:${event.target.errorCode}`); request.onsuccess = (event) => { db = event.target.result; };
1
2
3
4
5
6
7
2、對象存儲
3、事務
事務要通過調用數據庫對象的transaction()方法創建，任何時候，只要想要讀取或修改數據，都要通過事務把所有修改操作組織起來。
let transaction = db.transaction();
如果不指定參數，則對數據庫中所有的對象的存儲有只讀權限。
更具體的方式是指定一個或多個要訪問的對象存儲的名稱。
let transaction = db.transaction(“users”);
確保在事務期間只加載users對象存儲的信息。如果想要訪問多個對象存儲，也可以添加多個，逗號隔開。
4、插入對象
拿到對象存儲的引用后，就可以使用add()或put()寫入數據了。這個兩個方法都接收一個參數，即要存儲的對象，并把對象保存到對象存儲。
5、通過游標查詢
使用事務可以通過一個已知鍵取得一條記錄。如果想要取得多條數據，則需要在事務中創建一個游標。游標是一個指向結果集的指針。與傳統數據庫查詢不同，游標不會事先收集所有結果。相反，游標指向第一個結果，并在接收到指令前不會主動查找下一條數據。
需要在對象存儲上調用openCursor()方法創建游標。與其它IndexedDB操作一樣，openCursor()方法也返回一個請求，因此必須為它添加onsuccess和onerror事件處理程序。
const transaction = db.transaction("users"); const store = transaction.objectStore("users"); const request = store.openCursor(); request.onsuccess = (event) => { db = event.target.result;//訪問對象存儲中的下一條記錄 }; request.onerror = (event) => { };
1
2
3
4
5
6
7
8
9
10
6、索引
對某些數據集，可能需要為對象存儲指定多個鍵。
要創建新索引，首先要取得對象存儲的引用，然后調用createIndex()。
第一個參數是索引的名稱，第二個參數是索引屬性的名稱，第三個參數是包含unique的options對象。
const transaction = db.transaction("users"); const store = transaction.objectStore("users"); const index = store.createIndex("username","username",{unique:true});
1
2
3
六、總結
Web Storage定義了兩個對象用于存儲數據：sessionStorage，localStorage。前者用于嚴格保存瀏覽器一次會話期間的數據，因為數據會在瀏覽器關閉時被刪除。后者用于會話之外持久保存數據。
IndexedDB 是類似于SQL數據庫的結構化數據存儲機制，不同的是，IndexedDB 存儲的是對象，而不是數據表。對象存儲是通過定義鍵然后添加數據來創建的。游標用于查詢對象存儲中的特定數據，而索引可以針對特定屬性實現更快的查詢。
有了這些存儲手段，就可以在客戶端通過使用JavaScript存儲可觀的數據，因為這些數據沒有加密，所以要注意不能使用它們存儲敏感信息。
七、JavaScript思維導圖
JavaScript
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
