一、背景介紹
第一個Web存儲的技術(shù)叫做Cookie,它是網(wǎng)站的身份證。是網(wǎng)站為了辨別用戶身份,進(jìn)行session(服務(wù)端的session)跟蹤而存儲在用戶本地終端上的數(shù)據(jù),也就是說它是存在電腦硬盤上的,一個很小的txt類型的文件。Cookie每次都會跟隨http請求發(fā)送到服務(wù)端,也就是說每一個http請求都會帶上我們的cookie數(shù)據(jù),因此它存在一個安全性的問題。
cookie本身也是有很大的局限性的,首先它很小,主流的瀏覽器最大支持 4096 字節(jié),除了最大字節(jié)的限制,每個網(wǎng)站的cookie個數(shù)(也就是每一個first每一個域)也是有限制的,一般瀏覽器是20個。除此之外,cookie還會默認(rèn)跟隨所有http請求發(fā)送,即使不需要使用這個cookie來鑒別用戶但是它也是會跟隨http請求發(fā)送的,這樣就會造成一個網(wǎng)絡(luò)資源的浪費(fèi)。然后部分的瀏覽器還限制了總的cookie個數(shù)300個。
在cookie的諸多局限性下,Web Storage應(yīng)運(yùn)而生。Web Storage 解決了很多問題:
比如它支持存儲大量數(shù)據(jù),支持復(fù)雜的本地數(shù)據(jù)庫,而且也不會默認(rèn)跟隨http請求。Web Storage主要是有四個:
- SessionStorage
- LocalStorage
- WebSQL
- indexedDB
二、Cookie的簡單介紹
Cookie是html4的一個標(biāo)準(zhǔn),它一般不需要考慮兼容。它是網(wǎng)站的一個身份證,服務(wù)器可以針對不同用戶,做出不同的響應(yīng)。cookie存儲在用戶的機(jī)器上是一個純文本,就是一個txt文件并不是一個腳本,它不能執(zhí)行東西只負(fù)責(zé)記錄。瀏覽器每次請求都會帶上當(dāng)前網(wǎng)站的cookie。
Cookie分為兩種類型,一種呢是會話cookie,也就是臨時性的cookie,退出瀏覽器或者是關(guān)閉即刪除;
另一種叫持久cookie,它會一直存在,存在的時間由特定的過期時間或者是有效期來決定。
Cookie的域 Domain決定了當(dāng)前的一個cookie的權(quán)限,哪一個域可以使用這個cookie。
Cookie的路徑 Path,下面一個簡單的例子:
www.baidu.com id="123456" domain="www.baidu.com" www.baidu.com/user id="123456" user="eric" domain="www.baidu.com" path="/user/" ? www.baidu.com/search id="123456"; www.baidu.com/user/search id="123456" user="eric";
如上www.baidu.com設(shè)置了一個id等于123456,domain是www.baidu.com,然后另外一個跟第一個一樣多設(shè)置了一個user,id相同,但是多了一個user=“Eric”,它的domain設(shè)置成了www.baidu.com,path就到了user下面。這兩者設(shè)置完成之后,當(dāng)我們訪問www.baidu.com/search時百度只能拿到id,因?yàn)閡ser="Eric"是屬于user這個域下面的,也就是說在search下面是獲取不到的,但是在www.baidu.com/user/search這個時候我們就可以獲取到名叫Eric的user。Path也是一種權(quán)限的控制只是相較于域domain是低一級的。
Cookie的安全secure,如果這個屬性為TRUE,那么網(wǎng)站只有在https的請求下面才會攜帶當(dāng)前的cookie。
Cookie的HttpOnly這個屬性如果為TRUE,那么就不允許JAVAScript操作cookie。
因?yàn)閏ookie是存儲在客戶端一個獨(dú)立的文件,因此服務(wù)器是無法分辨用戶和攻擊者的。關(guān)于cookie的目的分為兩種:一種是跨站點(diǎn)腳本攻擊,一種是跨站請求偽造。
三、SessionStorage
key-value的鍵值對,是HTML5新增的一個會話存儲對象。
SessionStorage是臨時保存在同一窗口,也就是同一標(biāo)簽頁的數(shù)據(jù)。如果當(dāng)前標(biāo)簽頁關(guān)閉了,那么SessionStorage也就失效了。這也是SessionStorage最顯著的一個特點(diǎn):單頁標(biāo)簽限制。
除此之外,它還有的一些特點(diǎn)有:
- 同源策略,也就是在同一協(xié)議,同一主機(jī)名和同一端口下的同一tab
- 只在本地存儲,不會跟隨http請求發(fā)送到服務(wù)器
- 存儲方式采用key-value鍵值對,這里面的value只能存字符串類型,如果存其他的會自動轉(zhuǎn)換成字符串。
- 存儲上線限制達(dá)到了5MB,如果當(dāng)前存儲超出上限新的內(nèi)容會把舊的內(nèi)容覆蓋但不會報錯。
屬性:
- sessionStorage.length - 鍵值對數(shù)量
- sessionStorage.key(int index) -> null
- sessionStorage.getItem(string key) -> null
- sessionStorage[string key]
- sessionStorage.setItem(string key, string value)
- sessionStorage.removeItem(string key)
- sessionStorage.clear()
Json對象
- JSON.stringify()
- JSON.parse()
四、LocalStorage
LocalStorage也是在瀏覽器的Application下面有一個Local Storage,它和SessionStorage是十分相似的,同樣是key-value鍵值對,也是HTML5的新增存儲對象,它與SessionStorage的特點(diǎn)不同之處在于沒有標(biāo)簽頁的限制和在瀏覽器的無痕模式下LocalStorage是不允許讀取的,永久性的存儲,然后SessionStorage超出限制是覆蓋不會報錯而LocalStorage超出會報錯。
特點(diǎn)**:
- 同源策略,也就是在同一協(xié)議,同一主機(jī)名和同一端口下的同一tab
- 沒有標(biāo)簽頁的限制
- 只在本地存儲,不會跟隨http請求發(fā)送到服務(wù)器
- 存儲方式采用key-value鍵值對,這里面的value只能存字符串類型,如果存其他的會自動轉(zhuǎn)換成字符串。
- 存儲上線限制達(dá)到了5MB,如果當(dāng)前存儲超出上限會報錯。
- 無痕模式下不可讀取
- 永久性存儲
屬性:
- sessionStorage.length - 鍵值對數(shù)量
- sessionStorage.key(int index) -> null
- sessionStorage.getItem(string key) -> null
- sessionStorage[string key]
- sessionStorage.setItem(string key, string value)
- sessionStorage.removeItem(string key)
- sessionStorage.clear()
注意事項:LocalStorage和SessionStorage在web view是不可靠的,web view指的是在開發(fā)混合APP的時候使用了瀏覽器來實(shí)現(xiàn)我們的APP,這個時候是不可靠的,因?yàn)樵跒g覽器崩潰的情況下數(shù)據(jù)可能沒有存進(jìn)去。
另外一個在IOS瀏覽器中不可重復(fù)setItem,如果重復(fù)會報錯,然后這個時候我們需要先removeItem再添加item。
監(jiān)聽storage的變化
監(jiān)聽storage包括SessionStorage和LocalStorage。然后這里需要提到兩個概念:同源和監(jiān)聽同源網(wǎng)頁。
- 同源:協(xié)議、域名、端口三者相同,同源的情況下我們可以共享SessionStorage和LocalStorage。
- 同源策略還禁止不同源執(zhí)行任何腳本。
http://localhost:63342/simpleApp/app/index.html#/ (協(xié)議) (域名) (端口) (路徑)
- 監(jiān)聽同源網(wǎng)頁,但是同一網(wǎng)頁是無效的
window.addEventListener("storage", function (event) { console.log(event.key); console.log(event.oldValue); console.log(event.newValue); console.log(event.url); console.log(event.storageArea); });
五、IndexedDB
IndexedDB 背景
- Storage(Storage指的是SessionStorage和LocalStorage)不適合存儲大量的數(shù)據(jù)
- Storage不能提供搜索功能
- Storage不能建立索引,存儲的內(nèi)容也比較少
- IndexedDB擴(kuò)大了web存儲的容量,可以達(dá)到250MB以上
基本概念
首先它是一個NoSQL,也就是一個非關(guān)系型數(shù)據(jù)庫。MySQL和Oracle都是關(guān)系型數(shù)據(jù)庫。意思就是說如果建立了兩個表在關(guān)系型數(shù)據(jù)庫里面我們可以通過一個外鏈把多個表聯(lián)系起來,但是NoSQL不行,在NoSQL里面如果想要多個表關(guān)聯(lián)起來,我們只能手動的在關(guān)聯(lián)的表里面添加上需要關(guān)聯(lián)的另外一個或多個表的id。這是NoSQL與MySQL兩者之間的一個區(qū)別。
IndexedDB的特點(diǎn)也是和Storage是一樣的:
- 鍵值對儲存 ,但是允許所有類型,不允許主鍵重復(fù)報錯
- 是一個異步操作, 不阻塞瀏覽器線程
- 支持事務(wù),事務(wù)是SQL數(shù)據(jù)庫的一個概念,也就是說我們進(jìn)行任何的增刪改查都要在某一個事務(wù)下面進(jìn)行,提供了一個回滾功能,一系列操作有一步失敗, 數(shù)據(jù)庫回滾到事務(wù)發(fā)生之前的狀態(tài),這樣為了避免操作中途出現(xiàn)失敗,影響整個數(shù)據(jù)庫的狀態(tài)
- 同源限制
- 支持二進(jìn)制儲存
IndexedDB幾個基本概念:
- IDBDatabase - 數(shù)據(jù)庫
- IDBObjectStore - 對象倉庫
- IDBIndex - 索引
- IDBTransaction - 事務(wù)
- IDBRequest - 操作請求
- IDBCursor - 指針
- IDBKeyRange - 主鍵集合
IndexedDB瀏覽器兼容

IDBDatabase
IDB是IndexedDB的縮寫,它呢就是數(shù)據(jù)庫,數(shù)據(jù)庫也叫作數(shù)據(jù)的一個容器。每一個源(同源策略)可以建立很多數(shù)據(jù)庫。Database有一個版本的概念,版本對應(yīng)著數(shù)據(jù)庫表,同一時刻只能存在一個版本。比如:新增一個表,然后我們需要把database的版本加一,表里面要新增一列,這時同樣需要把數(shù)據(jù)庫版本加一。
注意:1 同一時刻只能有一個版本存在
? 2 修改數(shù)據(jù)庫結(jié)構(gòu)只能通過升級數(shù)據(jù)庫版本
- 打開數(shù)據(jù)庫
/* databaseName不存在則創(chuàng)建 */ /* version為整數(shù), 新建時為1 */ ? let database; let userStore; const request = window.indexedDB.open(databaseName, version); ? /* 成功打開數(shù)據(jù)庫 */ request.onsuccess = event => { database = request.result; } ? /* 打開數(shù)據(jù)庫失敗 */ request.onerror = error => { console.log(error); } ? /* 版本號大于當(dāng)前數(shù)據(jù)庫版本 */ request.onupgradeneeded = event => { database = event.target.result; }
注意:如果在打開數(shù)據(jù)庫時,數(shù)據(jù)庫不存在,將會新建一個
IDBObjectStore(數(shù)據(jù)庫表)
創(chuàng)建表,最好是在upgradeneeded下執(zhí)行;在創(chuàng)建數(shù)據(jù)庫表的時候需要指定主鍵,主鍵代表了唯一的標(biāo)識,比如 keyPath:‘id’;如果不指定主鍵,我們可以指定一個autoIncrement:true,自增的一個概念,也就是不指定主鍵數(shù)據(jù)庫會自動添加主鍵而且這個主鍵就是數(shù)字,依次遞增的。
const createStore = () => { //如果當(dāng)前的objectStoreNames.contains包含user,如果不包含user這個表,然后就用這個database.createObjectStore創(chuàng)建了一個表,這個表的名字就叫做user,然后主鍵就是下面的id if(!db.objectStoreNames.contains('user')) { userStore = database.createObjectStore('user', { keyPath: 'id' }); } }
指定索引:
const createStore = () => { if(!database.objectStoreNames.contains('user')) { userStore = database.createObjectStore('user', { keyPath: 'id' }); userStore.createIndex('name', 'name', { unique: true }); } }
IDBTransaction(事務(wù))
創(chuàng)建完之后需要往里面添加數(shù)據(jù),添加數(shù)據(jù)我們就需要使用到事務(wù)。
事務(wù)涉及到數(shù)據(jù)庫的增刪改查,它有三個狀態(tài):
- complete
- error
- abort
屬性:
- IDBTransaction.db 當(dāng)前數(shù)據(jù)庫
- IDBTransaction.mode 模式,使用模式分為readonly和readwrite
- IDBTransaction.objectStoreNames 當(dāng)前數(shù)據(jù)庫涉及到的哪幾個數(shù)組表
- IDBTransaction.error 回調(diào)
數(shù)據(jù)庫的基本操作:增刪改查以及清空。
新增數(shù)據(jù)(add)
分為兩種情況:一種是使用自增的數(shù)據(jù)庫的id或者是自增的一個鍵值,如果已經(jīng)創(chuàng)建主鍵,那么新增必須包含主鍵和另一種已創(chuàng)建主鍵但主鍵不可重復(fù)。
const add = () => { /* 創(chuàng)建事務(wù) */ /* 使用某個數(shù)據(jù)庫 */ /* add新增 */ transactionRequest = database.transaction(['user'], 'readwrite') .objectStore('user') .add({ id: 100, name: 'Eric', age: 28, email: '[email protected]' }); ? /* 成功 */ transactionRequest.onsuccess = event => { console.log('數(shù)據(jù)寫入成功', event); }; ? /* 失敗 */ transactionRequest.onerror = error => { console.log('數(shù)據(jù)寫入失敗', error); } }
讀取數(shù)據(jù)(get)
const read = () => { /* 創(chuàng)建事務(wù) */ transaction = database.transaction(['user']); /* 選擇數(shù)據(jù)庫表 */ table = transaction.objectStore('user'); /* 讀取數(shù)據(jù) */ transactionRequest = table.get(2); ? /* 成功 */ transactionRequest.onerror = event => { console.log('數(shù)據(jù)讀取失敗', event); }; ? /* 失敗 */ transactionRequest.onsuccess = event => { if (transactionRequest.result) { console.log('數(shù)據(jù)讀取成功', transactionRequest.result); } else { console.log('未讀取到數(shù)據(jù)'); } }; }
更新數(shù)據(jù)(put)
更新不存在的數(shù)據(jù)時會新建,也就是說在新增數(shù)據(jù)時如果相同,往往會出錯,但是在更新數(shù)據(jù)時不會出錯。如果數(shù)據(jù)不存在就會新建,如果存在就會一直更新。
const update = () => { transactionRequest = database.transaction(['user'], 'readwrite') .objectStore('user') .put({ id: count, name: 'David', age: 35, email: '[email protected]' }); ? transactionRequest.onsuccess = function (event) { console.log('更新數(shù)據(jù)成功', event); }; ? transactionRequest.onerror = error => { console.log('更新數(shù)據(jù)失敗', error); } }
刪除數(shù)據(jù)(delete)
const delete = () => { transactionRequest = database.transaction(['user'], 'readwrite') .objectStore('user') .delete(2); ? transactionRequest.onsuccess = function (event) { console.log('刪除數(shù)據(jù)成功', event); }; ? transactionRequest.onerror = error => { console.log('刪除數(shù)據(jù)失敗', error); } }
清空數(shù)據(jù)(clear)
IDBCursor(指針)
提供了一種遍歷數(shù)據(jù)的可能。
const readAll = () => { table = database.transaction('user').objectStore('user'); ? table.openCursor().onsuccess = () => { let cursor = event.target.result; ? if (cursor) { console.log('數(shù)據(jù)遍歷', cursor); cursor.continue(); } else { console.log('數(shù)據(jù)遍歷完成'); } }; }
關(guān)閉IndexedDB數(shù)據(jù)庫連接
const closeDataBase = () => { database.close(); }
刪除IndexedDB數(shù)據(jù)庫前,須先關(guān)閉數(shù)據(jù)庫連接
const deleteDataBase = () => { indexedDB.deleteDatabase('first_database'); }
六、WebSQL
基本概念:并不是 HTML5 的規(guī)范 , 只能算是一個獨(dú)立的規(guī)范;使用WebSQL是完完全全的SQL 語句,使用SQL語句來操作客戶端數(shù)據(jù)庫;它一共有三個比較重要的概念,分別是:openDatabase 打開數(shù)據(jù)庫,可以是使用現(xiàn)有數(shù)據(jù)庫或者新建數(shù)據(jù)庫;transaction 事務(wù),所有的數(shù)據(jù)庫都支持事務(wù);executeSql 執(zhí)行SQL語句。
openDatabase(打開數(shù)據(jù)庫)
相比于IndexedDB的概念稍微多一點(diǎn),主要是有數(shù)據(jù)庫名稱、版本號(在IndexedDB里面版本號都是整數(shù),但是在WebSQL里面它可以是小數(shù))、描述文本(介紹數(shù)據(jù)庫是干什么的)、數(shù)據(jù)庫大小和創(chuàng)建回調(diào)(function,只在第一次創(chuàng)建的時候才會調(diào)用)。
const database = openDatabase('my_database', '1.0', 'first', 2 * 1024 * 1024, function() { ? });
Transaction(事務(wù))
- 創(chuàng)建表
const createTable = () => { database.transaction(function (content) { content.executeSql('CREATE TABLE IF NOT EXISTS USER (id unique, name)'); }); }
- 添加數(shù)據(jù)
const addData = () => { database.transaction(function (content) { content.executeSql('INSERT INTO USER (id, name) VALUES (1, "Eric")'); }); }
- 查詢數(shù)據(jù)
const searchData = () => { database.transaction(function (content) { content.executeSql('SELECT * FROM USER'); }); }
- 更新數(shù)據(jù)
const updateData = () => { database.transaction(function (content) { content.executeSql('UPDATE USER SET name='David' WHERE id=1'); }); }
- 刪除數(shù)據(jù)庫表
const deleteDataBase = () => { database.transaction(function (content) { content.executeSql('DROP TABLE USER'); }); }