一、背景介紹

第一個(gè)Web存儲(chǔ)的技術(shù)叫做Cookie，它是網(wǎng)站的身份證。是網(wǎng)站為了辨別用戶身份，進(jìn)行session（服務(wù)端的session）跟蹤而存儲(chǔ)在用戶本地終端上的數(shù)據(jù)，也就是說它是存在電腦硬盤上的，一個(gè)很小的txt類型的文件。Cookie每次都會(huì)跟隨http請(qǐng)求發(fā)送到服務(wù)端，也就是說每一個(gè)http請(qǐng)求都會(huì)帶上我們的cookie數(shù)據(jù)，因此它存在一個(gè)安全性的問題。

cookie本身也是有很大的局限性的，首先它很小，主流的瀏覽器最大支持 4096 字節(jié)，除了最大字節(jié)的限制，每個(gè)網(wǎng)站的cookie個(gè)數(shù)（也就是每一個(gè)first每一個(gè)域）也是有限制的，一般瀏覽器是20個(gè)。除此之外，cookie還會(huì)默認(rèn)跟隨所有http請(qǐng)求發(fā)送，即使不需要使用這個(gè)cookie來鑒別用戶但是它也是會(huì)跟隨http請(qǐng)求發(fā)送的，這樣就會(huì)造成一個(gè)網(wǎng)絡(luò)資源的浪費(fèi)。然后部分的瀏覽器還限制了總的cookie個(gè)數(shù)300個(gè)。

在cookie的諸多局限性下，Web Storage應(yīng)運(yùn)而生。Web Storage 解決了很多問題：

比如它支持存儲(chǔ)大量數(shù)據(jù)，支持復(fù)雜的本地?cái)?shù)據(jù)庫，而且也不會(huì)默認(rèn)跟隨http請(qǐng)求。Web Storage主要是有四個(gè)：

• SessionStorage
• LocalStorage
• WebSQL
• indexedDB

二、Cookie的簡(jiǎn)單介紹

Cookie是html4的一個(gè)標(biāo)準(zhǔn)，它一般不需要考慮兼容。它是網(wǎng)站的一個(gè)身份證，服務(wù)器可以針對(duì)不同用戶，做出不同的響應(yīng)。cookie存儲(chǔ)在用戶的機(jī)器上是一個(gè)純文本，就是一個(gè)txt文件并不是一個(gè)腳本，它不能執(zhí)行東西只負(fù)責(zé)記錄。瀏覽器每次請(qǐng)求都會(huì)帶上當(dāng)前網(wǎng)站的cookie。

Cookie分為兩種類型，一種呢是會(huì)話cookie，也就是臨時(shí)性的cookie，退出瀏覽器或者是關(guān)閉即刪除；

另一種叫持久cookie，它會(huì)一直存在，存在的時(shí)間由特定的過期時(shí)間或者是有效期來決定。

Cookie的域 Domain決定了當(dāng)前的一個(gè)cookie的權(quán)限，哪一個(gè)域可以使用這個(gè)cookie。

Cookie的路徑 Path，下面一個(gè)簡(jiǎn)單的例子：

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è)置了一個(gè)id等于123456，domain是www.baidu.com，然后另外一個(gè)跟第一個(gè)一樣多設(shè)置了一個(gè)user，id相同，但是多了一個(gè)user=“Eric”，它的domain設(shè)置成了www.baidu.com，path就到了user下面。這兩者設(shè)置完成之后，當(dāng)我們?cè)L問www.baidu.com/search時(shí)百度只能拿到id，因?yàn)閡ser="Eric"是屬于user這個(gè)域下面的，也就是說在search下面是獲取不到的，但是在www.baidu.com/user/search這個(gè)時(shí)候我們就可以獲取到名叫Eric的user。Path也是一種權(quán)限的控制只是相較于域domain是低一級(jí)的。

Cookie的安全secure，如果這個(gè)屬性為TRUE，那么網(wǎng)站只有在https的請(qǐng)求下面才會(huì)攜帶當(dāng)前的cookie。

Cookie的HttpOnly這個(gè)屬性如果為TRUE，那么就不允許JAVAScript操作cookie。

因?yàn)閏ookie是存儲(chǔ)在客戶端一個(gè)獨(dú)立的文件，因此服務(wù)器是無法分辨用戶和攻擊者的。關(guān)于cookie的目的分為兩種：一種是跨站點(diǎn)腳本攻擊，一種是跨站請(qǐng)求偽造。

三、SessionStorage

key-value的鍵值對(duì)，是HTML5新增的一個(gè)會(huì)話存儲(chǔ)對(duì)象。

SessionStorage是臨時(shí)保存在同一窗口，也就是同一標(biāo)簽頁的數(shù)據(jù)。如果當(dāng)前標(biāo)簽頁關(guān)閉了，那么SessionStorage也就失效了。這也是SessionStorage最顯著的一個(gè)特點(diǎn)：?jiǎn)雾摌?biāo)簽限制。

除此之外，它還有的一些特點(diǎn)有：

• 同源策略，也就是在同一協(xié)議，同一主機(jī)名和同一端口下的同一tab
• 只在本地存儲(chǔ)，不會(huì)跟隨http請(qǐng)求發(fā)送到服務(wù)器
• 存儲(chǔ)方式采用key-value鍵值對(duì)，這里面的value只能存字符串類型，如果存其他的會(huì)自動(dòng)轉(zhuǎn)換成字符串。
• 存儲(chǔ)上線限制達(dá)到了5MB，如果當(dāng)前存儲(chǔ)超出上限新的內(nèi)容會(huì)把舊的內(nèi)容覆蓋但不會(huì)報(bào)錯(cuò)。

屬性：

• sessionStorage.length - 鍵值對(duì)數(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對(duì)象

• JSON.stringify()
• JSON.parse()

四、LocalStorage

LocalStorage也是在瀏覽器的Application下面有一個(gè)Local Storage，它和SessionStorage是十分相似的，同樣是key-value鍵值對(duì)，也是HTML5的新增存儲(chǔ)對(duì)象，它與SessionStorage的特點(diǎn)不同之處在于沒有標(biāo)簽頁的限制和在瀏覽器的無痕模式下LocalStorage是不允許讀取的，永久性的存儲(chǔ)，然后SessionStorage超出限制是覆蓋不會(huì)報(bào)錯(cuò)而LocalStorage超出會(huì)報(bào)錯(cuò)。

特點(diǎn)**：

• 同源策略，也就是在同一協(xié)議，同一主機(jī)名和同一端口下的同一tab
• 沒有標(biāo)簽頁的限制
• 只在本地存儲(chǔ)，不會(huì)跟隨http請(qǐng)求發(fā)送到服務(wù)器
• 存儲(chǔ)方式采用key-value鍵值對(duì)，這里面的value只能存字符串類型，如果存其他的會(huì)自動(dòng)轉(zhuǎn)換成字符串。
• 存儲(chǔ)上線限制達(dá)到了5MB，如果當(dāng)前存儲(chǔ)超出上限會(huì)報(bào)錯(cuò)。
• 無痕模式下不可讀取
• 永久性存儲(chǔ)

屬性：

• sessionStorage.length - 鍵值對(duì)數(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()

注意事項(xiàng)：LocalStorage和SessionStorage在web view是不可靠的，web view指的是在開發(fā)混合APP的時(shí)候使用了瀏覽器來實(shí)現(xiàn)我們的APP，這個(gè)時(shí)候是不可靠的，因?yàn)樵跒g覽器崩潰的情況下數(shù)據(jù)可能沒有存進(jìn)去。

另外一個(gè)在IOS瀏覽器中不可重復(fù)setItem，如果重復(fù)會(huì)報(bào)錯(cuò)，然后這個(gè)時(shí)候我們需要先removeItem再添加item。

監(jiān)聽storage的變化

監(jiān)聽storage包括SessionStorage和LocalStorage。然后這里需要提到兩個(gè)概念：同源和監(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）不適合存儲(chǔ)大量的數(shù)據(jù)
• Storage不能提供搜索功能
• Storage不能建立索引，存儲(chǔ)的內(nèi)容也比較少
• IndexedDB擴(kuò)大了web存儲(chǔ)的容量，可以達(dá)到250MB以上

基本概念

首先它是一個(gè)NoSQL，也就是一個(gè)非關(guān)系型數(shù)據(jù)庫。MySQL和Oracle都是關(guān)系型數(shù)據(jù)庫。意思就是說如果建立了兩個(gè)表在關(guān)系型數(shù)據(jù)庫里面我們可以通過一個(gè)外鏈把多個(gè)表聯(lián)系起來，但是NoSQL不行，在NoSQL里面如果想要多個(gè)表關(guān)聯(lián)起來，我們只能手動(dòng)的在關(guān)聯(lián)的表里面添加上需要關(guān)聯(lián)的另外一個(gè)或多個(gè)表的id。這是NoSQL與MySQL兩者之間的一個(gè)區(qū)別。

IndexedDB的特點(diǎn)也是和Storage是一樣的：

• 鍵值對(duì)儲(chǔ)存 ，但是允許所有類型，不允許主鍵重復(fù)報(bào)錯(cuò)
• 是一個(gè)異步操作， 不阻塞瀏覽器線程
• 支持事務(wù)，事務(wù)是SQL數(shù)據(jù)庫的一個(gè)概念，也就是說我們進(jìn)行任何的增刪改查都要在某一個(gè)事務(wù)下面進(jìn)行，提供了一個(gè)回滾功能，一系列操作有一步失敗, 數(shù)據(jù)庫回滾到事務(wù)發(fā)生之前的狀態(tài)，這樣為了避免操作中途出現(xiàn)失敗，影響整個(gè)數(shù)據(jù)庫的狀態(tài)
• 同源限制
• 支持二進(jìn)制儲(chǔ)存

IndexedDB幾個(gè)基本概念：

• IDBDatabase - 數(shù)據(jù)庫
• IDBObjectStore - 對(duì)象倉庫
• IDBIndex - 索引
• IDBTransaction - 事務(wù)
• IDBRequest - 操作請(qǐng)求
• IDBCursor - 指針
• IDBKeyRange - 主鍵集合

IndexedDB瀏覽器兼容

IDBDatabase

IDB是IndexedDB的縮寫，它呢就是數(shù)據(jù)庫，數(shù)據(jù)庫也叫作數(shù)據(jù)的一個(gè)容器。每一個(gè)源（同源策略）可以建立很多數(shù)據(jù)庫。Database有一個(gè)版本的概念，版本對(duì)應(yīng)著數(shù)據(jù)庫表，同一時(shí)刻只能存在一個(gè)版本。比如：新增一個(gè)表，然后我們需要把database的版本加一，表里面要新增一列，這時(shí)同樣需要把數(shù)據(jù)庫版本加一。

注意：1 同一時(shí)刻只能有一個(gè)版本存在

? 2 修改數(shù)據(jù)庫結(jié)構(gòu)只能通過升級(jí)數(shù)據(jù)庫版本

• 打開數(shù)據(jù)庫

/* databaseName不存在則創(chuàng)建 */
/* version為整數(shù), 新建時(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);
}
?
/* 版本號(hào)大于當(dāng)前數(shù)據(jù)庫版本 */
request.onupgradeneeded = event => {
 database = event.target.result;
}

注意：如果在打開數(shù)據(jù)庫時(shí)，數(shù)據(jù)庫不存在，將會(huì)新建一個(gè)

IDBObjectStore（數(shù)據(jù)庫表）

創(chuàng)建表，最好是在upgradeneeded下執(zhí)行；在創(chuàng)建數(shù)據(jù)庫表的時(shí)候需要指定主鍵，主鍵代表了唯一的標(biāo)識(shí)，比如 keyPath：‘id’；如果不指定主鍵，我們可以指定一個(gè)autoIncrement：true，自增的一個(gè)概念，也就是不指定主鍵數(shù)據(jù)庫會(huì)自動(dòng)添加主鍵而且這個(gè)主鍵就是數(shù)字，依次遞增的。

const createStore = () => {
 //如果當(dāng)前的objectStoreNames.contains包含user，如果不包含user這個(gè)表，然后就用這個(gè)database.createObjectStore創(chuàng)建了一個(gè)表，這個(gè)表的名字就叫做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ù)庫的增刪改查，它有三個(gè)狀態(tài)：

• complete
• error
• abort

屬性：

• IDBTransaction.db 當(dāng)前數(shù)據(jù)庫
• IDBTransaction.mode 模式，使用模式分為readonly和readwrite
• IDBTransaction.objectStoreNames 當(dāng)前數(shù)據(jù)庫涉及到的哪幾個(gè)數(shù)組表
• IDBTransaction.error 回調(diào)

數(shù)據(jù)庫的基本操作：增刪改查以及清空。

新增數(shù)據(jù)（add）

分為兩種情況：一種是使用自增的數(shù)據(jù)庫的id或者是自增的一個(gè)鍵值，如果已經(jīng)創(chuàng)建主鍵，那么新增必須包含主鍵和另一種已創(chuàng)建主鍵但主鍵不可重復(fù)。

const add = () => {
 /* 創(chuàng)建事務(wù) */
 /* 使用某個(gè)數(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í)會(huì)新建，也就是說在新增數(shù)據(jù)時(shí)如果相同，往往會(huì)出錯(cuò)，但是在更新數(shù)據(jù)時(shí)不會(huì)出錯(cuò)。如果數(shù)據(jù)不存在就會(huì)新建，如果存在就會(huì)一直更新。

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ī)范 ， 只能算是一個(gè)獨(dú)立的規(guī)范；使用WebSQL是完完全全的SQL 語句，使用SQL語句來操作客戶端數(shù)據(jù)庫；它一共有三個(gè)比較重要的概念，分別是：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ù)庫名稱、版本號(hào)（在IndexedDB里面版本號(hào)都是整數(shù)，但是在WebSQL里面它可以是小數(shù)）、描述文本（介紹數(shù)據(jù)庫是干什么的）、數(shù)據(jù)庫大小和創(chuàng)建回調(diào)（function，只在第一次創(chuàng)建的時(shí)候才會(huì)調(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');
 });
 }