本篇將介紹前端本地存儲里的Web SQL和IndexedDB，通過一個案例介紹SQL的一些概念。

1. 地圖報表的案例

現(xiàn)在要做一個地圖報表，如下圖所示： 

將所有的訂單數(shù)據(jù)做一個圖表展示，左邊的地圖展示每個city的成單情況，右邊的圖形，展示最近7天的成單情況。由于后端的數(shù)據(jù)需要前端做一些解析，如向谷歌請求每個city的經(jīng)緯度，所以后端給前端原始的訂單數(shù)據(jù)，前端進行格式化和歸類展示。另外把原始數(shù)據(jù)直接放前端，前端處理起來可以比較靈活，想怎么展示就怎么展示，不用每次展示方式變的時候都需要找后端新加接口。

但是數(shù)據(jù)放在前端管理，相應(yīng)地就會引入一個問題——如何高效地存儲和使用這些數(shù)據(jù)。最起碼處理起來不要讓頁面卡了。

2. cookie和localStorage

—cookie的數(shù)據(jù)量比較小，瀏覽器限制最大只能為4k，而—localStorage和sessionStorage適合于小數(shù)據(jù)量的存儲，firefox和Chrome限制最大存儲為5Mb，如下火狐的config： 

??

localStorage是存放在一個本地文件里面，在筆者的Mac上是放在：

/Users/yincheng/Library/Application Support/Google/Chrome/Default/Local Storage/ http_www.test.com.localstorage

用文本編輯器打開這個二進制文件，可以看到本地存儲的內(nèi)容： 

??

[[193679]]

可以參照控制臺的輸出： 

??

如果一個網(wǎng)站要用掉5Mb硬盤空間，那么打開過一百個網(wǎng)頁就得花500Mb的空間，所以本地存儲localStorage的空間限制得比較小。

另外，可以看到localStorage是以字符串的方式存儲的，存之前要先JSON.stringify變成字符串，取的時候需要用JSON.parse恢復(fù)成相應(yīng)的格式。localStorage適合于比較簡單的數(shù)據(jù)存放和管理。

3. 管理復(fù)雜數(shù)據(jù)

后端給我這樣的JSON數(shù)據(jù)：

[  {“orderId”:100314,”userId”:379558604617762,”city”:”ca”,”state”:”ca”,”zipcode”:”91000″,”address”:”11″,”price”:2698.00,”createTime”:1477651308000},  {“orderId”:100821,”userId”:514694887070560,”city”:”San Francisco”,”state”:”CA”,”zipcode”:”94103″,”address”:”251 Rhode Island St #105″,”price”:2182.00,”createTime”:1481104358000}  ]

我用這些數(shù)據(jù)去請求它們的經(jīng)緯度。

這些數(shù)據(jù)的量比較大，有成百上千甚至幾萬條數(shù)據(jù)，—數(shù)據(jù)需要復(fù)雜的查詢，需要支持：

1. 訂單按日期分類和排序
2. 訂單按照city分類

—如果自己管理JSON數(shù)據(jù)就會比較麻煩，所以這里嘗試使用Web SQL來管理這些數(shù)據(jù)。

4. Web SQL

(1)什么是SQL

SQL作用在關(guān)系型數(shù)據(jù)庫上面，什么是關(guān)系型數(shù)據(jù)庫?關(guān)系型數(shù)據(jù)庫是由一張張的二維表組成的，如下圖所示： 

??

那什么是SQL呢?SQL是一種操作關(guān)系型DB的語言，支持創(chuàng)建表，插入表，修改和刪除等等，還提供非常強大的查詢功能。

常見的關(guān)系型數(shù)據(jù)庫廠商有MySQL、SQLite、SQL Server、Oracle，由于MySQL是免費的，所以企業(yè)一般用MySQL的居多。

Web SQL是前端的數(shù)據(jù)庫，它也是本地存儲的一種，使用SQLite實現(xiàn)，SQLite是一種輕量級數(shù)據(jù)庫，它占的空間小，支持創(chuàng)建表，插入、修改、刪除表格數(shù)據(jù)，但是不支持修改表結(jié)構(gòu)，如刪掉一縱列，修改表頭字段名等。但是可以把整張表刪了。同一個域可以創(chuàng)建多個DB，每個DB有若干張表，如下圖示意： 

??

(2)創(chuàng)建一個DB

如下代碼所示： 

??

使用openDatabase，傳4個參數(shù)，指定數(shù)據(jù)庫大小，如果指定太大，瀏覽器會提示用戶是否允許使用這么多空間，如Safari的提示： 

??

如果不允許，瀏覽器將會拋異常：

QuotaExceededError (DOM Exception 22): The quota has been exceeded.

這樣就創(chuàng)建了一個數(shù)據(jù)庫叫order_test，返回了一個db對象，使用這個db對象創(chuàng)建一張表

(3)創(chuàng)建表

如下代碼所示：

db.transaction(function(tx){  tx.executeSql("create table if not exists order_data(order_id primary key, format_city, lat, lng, price, create_time)", [], null, function(tx, err){  throw(`execute sql failed: ${err.code} ${err.message}`);  });  });

傳一個回調(diào)給db.transaction，它會傳一個SQLTransaction的實例，它表示一個事務(wù)，然后調(diào)executeSql函數(shù)，傳四個參數(shù)，第一個參數(shù)為要執(zhí)行的SQL語句，第二個參數(shù)為選項，第三個為成功回調(diào)函數(shù)，第四個為失敗回調(diào)函數(shù)，這里我們拋一個異常，打印失敗的描述。我們執(zhí)行的SQL語句為：

create table if not exists order_data(order_id primary key, format_city, lat, lng, price, create_time)

意思是創(chuàng)建一張order_data表，它的字段有6個，第一個order_id為主鍵，主鍵用來標(biāo)志這一列，并且不允許有重復(fù)的值。

現(xiàn)在往這張表插入數(shù)據(jù)。

(4)插入數(shù)據(jù)

準(zhǔn)備好原始數(shù)據(jù)和對數(shù)據(jù)做一些處理，如下所示：

var order = {  orderId: 100314, format_city: "New York, NY, USA",  lat: 40.7127837, lng: -74.0059413, price: 150, createTime: 1473884040000};//把時間戳轉(zhuǎn)成年月日2017-06-08類型的var date = dataProcess.getDateStr(order.createTime);

然后執(zhí)行插入：

tx.executeSql(`insert into order_data  values(${order.orderId}, '${order.format_city}',  ${order.lat}, ${order.lng}, ${order.price}, '${date}')`);

就可以在瀏覽器控制臺看到剛剛創(chuàng)建的數(shù)據(jù)庫、表，如下圖所示： 

??

如果把剛剛的那條數(shù)據(jù)再插入一遍會怎么樣呢?如刷新一下頁面，它又重新執(zhí)行。

(5)主鍵唯一約束

插入一個重復(fù)主鍵，這里為id，executeSql的失敗函數(shù)將會執(zhí)行，如下所示： 

??

所以一般id是自動生成的，mysql可以指定某個整數(shù)字段為auto_increment，而web sql對整數(shù)字段不指定也是auto_increment，需要在創(chuàng)建的時候指定當(dāng)前字段為integer，如下語句：

create table student(id integer primary key  auto_increment  , age, score);

作用是創(chuàng)建一張student表，它的id是自動自增的，執(zhí)行insert插入時會自動生成一個id：

insert into student(grade, score) values(5, 88);

這樣插入幾次，得到如下表： 

??

可以看到id由1開始自動增長。經(jīng)常利用這種自增功能生成用戶的id、訂單的id等等。 

上面指定了id為整型，就不能插入一個字符串的數(shù)據(jù)，否則會報錯。而如果沒指定，可以插入數(shù)字也可以插入字符串，當(dāng)然同一字段最好類型要一致。如mysql、SQL Server等數(shù)據(jù)庫都是強類型的。

這里有一個細(xì)節(jié)需要注意，后端的mysql的id一般采用64位的長整型，這個數(shù)最大值為一個19位數(shù)：

9223372036854775807

而JS的最大整數(shù)為一個16位數(shù)，大于這個數(shù)的值將會是不可靠的，如下圖所示： 

??

因此如果發(fā)生這種情況的話，需要讓后端把ID當(dāng)作字符串的方式傳給你。這個我在《 為什么0.1 + 0.2不等于0.3? 》這篇文章里面做過討論。

(6)全部的數(shù)據(jù)

把所有的數(shù)據(jù)都插入之后，得到如下表： 

??

然后我們開始做查詢。

(7)Select查詢

—a)查出每個城市的單數(shù)和，按日期升序。便于地圖按city展示，可以執(zhí)行以下SQL：

— select format_city as city, count(order_id) as ‘count’, sum(price) as amount from order_data group by format_city order by date

結(jié)果如下圖所示： 

??

b)然后再—查一下最近7天每一天的單數(shù)，用于右邊柱狀圖的展示，執(zhí)行以下SQL：

—select date, count(order_id) as ‘count’, sum(price) as amount from order_data group by date order by date desc limit 0, 7

得到： 

??

c)查詢某個orderId是否存在，因為數(shù)據(jù)需要動態(tài)更新，例如每兩個小時更新一次，如果有新數(shù)據(jù)需要去查詢格式化的地址以及經(jīng)緯度。而每次請求都是拉取全部數(shù)據(jù)，因此需要找出哪些是新數(shù)據(jù)。可以執(zhí)行：

— select order_id from order_data where order_id = ${order.orderId}

如果返回空的結(jié)果集，說明這個orderId不存在。

上面是在控制臺執(zhí)行，在代碼里面怎么獲取結(jié)果呢，如下圖所示： 

??

某些字段可能會被重復(fù)查詢，如order_id，format_city，如果對這些字段做一個索引，那么可以提高查詢的效率。

(8)建立索引

由于order_id是主鍵，自動會有索引，其它字段需要手動創(chuàng)建一個索引，如對format_city添加一個索引可執(zhí)行：

— create index if not exists index_format_city on order_data(format_city)

為什么創(chuàng)建索引可以提高查詢效率呢?因為如果沒建索引要找到某個字段等于某個值的數(shù)據(jù)，需要遍歷所有的數(shù)據(jù)條項，查找復(fù)雜度為O(N)，而建立索引一般是使用二叉查找樹或者它的變種，查找復(fù)雜度變成O(logN)，mysql是使用的B+樹。有興趣的可繼續(xù)查找資料。

另外字符串可使用哈希變成數(shù)字，字符串索引要比數(shù)字低效很多。

使用索引的代價是增加存儲空間，降低插入修改的效率。所以索引不能建太多，如果查詢的次數(shù)要明顯高于修改那么建立索引是好的，相反如果某個字段需要被頻繁修改，那可能不太適合建立索引。

5. 關(guān)系型數(shù)據(jù)庫的優(yōu)缺點

(1)優(yōu)點

—SQL支持非常復(fù)雜的查詢，可以聯(lián)表查詢、使用正則表達(dá)式查詢、嵌套查詢，還可以寫一個獨立的SQL腳本。

上面的案例，—如果不使用SQL，那兩個查詢自己寫代碼篩選數(shù)據(jù)也可以實現(xiàn)，但是會比較麻煩，特別是數(shù)據(jù)量比較大的時候，如果算法寫得不好，就容易有性能問題。而使用DB數(shù)據(jù)的查詢性能就交給DB。它還是異步的，不會有堵塞頁面的情況。

(2)缺點

一般來說，存在以下缺點：—

不方便橫向擴展，例如給數(shù)據(jù)庫表添加一個字段，如果數(shù)據(jù)量達(dá)到億級，那么這個操作的復(fù)雜性將會是非常可觀的。—

—海量數(shù)據(jù)用SQL聯(lián)表查詢，性能將會非常差。

—關(guān)系型數(shù)據(jù)庫為了保持事務(wù)的一致性特點，難以應(yīng)對高并發(fā)

(3)Web SQL被deprecated

在 w3c的文檔 上，可以看到：

—This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.

大意是說WebSQL現(xiàn)有的實現(xiàn)是基于現(xiàn)成的第三方SQLite，但是我們需要獨立的實現(xiàn)。火狐也不打算支持。也就是說主要原因是web sql太過于依賴SQLite，或許W3C可能會在以后重新制訂一套標(biāo)準(zhǔn)。

雖然已經(jīng)不建議使用了，但是上面還是花了很多篇幅介紹web sql，主要是因為SQL是通用的，我的主要目的并不是要向讀者介紹web sql的API，怎么使用web sql，而是給讀者介紹一些SQL的核心概念，如怎么建表，怎么插入數(shù)據(jù)，畢竟SQL是通用的，就算再過個幾十年它也很難會過時。

接下來再介紹第二種數(shù)據(jù)庫非關(guān)系型數(shù)據(jù)庫

6. 非關(guān)系型數(shù)據(jù)庫

非關(guān)系型數(shù)據(jù)庫根據(jù)它的存儲特點，常用的有：

(1)key-value型，如Redis/IndexedDB，value可以為任意數(shù)據(jù)類型，如下圖所示： 

??

(2)json/document型，—如MongoDB，value按照一定的格式，可對value的字段做索引，IndexedDB也支持，如下圖所示： 

??

非關(guān)系型數(shù)據(jù)庫也叫NoSQL數(shù)據(jù)庫。

—NoSQL是Not Only SQL的簡寫，意思為不僅僅是SQL，但其實它和SQL沒什么關(guān)系，只是為了不讓人覺得它太異類。它的特點是存儲比較靈活，但是查找沒有像關(guān)系型SQL一樣好用。適用于數(shù)據(jù)量很大，只需要單表key查詢，一致性不用很高的場景。

7. IndexedDB

(1)IndexedDB的一些概念

IndexedDB是本地存儲的第三種方式，它是非關(guān)系型數(shù)據(jù)庫。它的建立數(shù)據(jù)庫、建表、插入數(shù)據(jù)等操作如下代碼如下，這里不進行拆分講解，具體API細(xì)節(jié)讀者可查MDN等相關(guān)文檔。

//創(chuàng)建和打開一個數(shù)據(jù)庫var request = window.indexedDB.open("orders", 7);var db = null; request.onsuccess = function(event){     db = event.target.result; contains("order_data")){ transaction("order_data", "readwrite").objectStore("order_data");         //insertOrders(orderStore);    }   };   request.onupgradeneeded = function(event){     db = event.target.result; contains("order_data")){ "order_data", {keyPath: "orderId"});         insertOrders(orderStore);     } }; function insertOrders(orderStore){     var orders = orderData.data; for(var i = 0; i < orders.length; i++){ add(orders[i]);          //add是一個異步的操作，返回一個IDBRequest，有onsucess    } }

 執(zhí)行完之后就有了一張order_data的表，如下所示： 

??

—現(xiàn)在要查詢某個orderId的數(shù)據(jù)，可執(zhí)行以下代碼：

function query(orderId){ transaction("order_data", "readonly") //IDBTransaction      .objectStore("order_data")             //IDBObjectStore      .get(orderId)                          //IDBRequest      .onsuccess = function(event){ order = event.target.result; order)     }; }

 結(jié)果如下圖所示： 

??

怎么查詢value字段里面的數(shù)據(jù)呢?如要查詢state為CA的訂單，那么給state這個字段添加一個索引就可以查詢 了，如下所示： 

??

這里就可以知道，為什么要叫IndexedDB或者索引數(shù)據(jù)庫了，因為它主要是通過創(chuàng)建索引進行查詢的。

上面只返回了一個結(jié)果，但是一般需要獲取全部的結(jié)果，就得使用游標(biāo)cursor，如下代碼所示： 

??

打印結(jié)果如下： 

??

IndexedDB還支持插入json格式不一樣的數(shù)據(jù)，如下代碼：

var specilaData = { 'hello, world', "goodbye, world"}; transaction("order_data", "readwrite").objectStore("order_data"); orderStore.add(specilaData).onsuccess = function(event){ 'hello, world').onsuccess = function(event){         console.log(event.target.result);     }; };

結(jié)果如下圖所示： 

??

(2)非關(guān)系型數(shù)據(jù)庫的橫向擴展

上面說關(guān)系型數(shù)據(jù)庫不利于橫向擴展，而在一般的非關(guān)系型數(shù)據(jù)庫里面，每個數(shù)據(jù)存儲的類型都可以不一樣，即每個key對應(yīng)的value的json字段格式可以不一致，所以不存在添加字段的問題，而相同類型的字段可以創(chuàng)建索引，提高查詢效率。

—NoSQL做不了復(fù)雜查詢，如上面的案例要按照日期/city歸類的話，需要自己打開一個游標(biāo)循環(huán)做處理。所以我選擇用Web SQL主要是這個原因。

(3)兼容性

WebSQL兼容性如下caniuse所示： 

??

主要是IE和火狐不支持，而IndexedDB的兼容性會好很多： 

??

8. 數(shù)據(jù)庫與Promise

—數(shù)據(jù)庫的查找，添加等都是異步操作，有時候你可能需要先發(fā)個請求獲取數(shù)據(jù)，然后插入數(shù)據(jù)，重復(fù)N次之后，再查詢數(shù)據(jù)。例如我需要先一條條地向谷歌服務(wù)器解析地址，再插入數(shù)據(jù)庫，然后再做查詢。在查詢數(shù)據(jù)之前需要保證數(shù)據(jù)已經(jīng)都全部寫到數(shù)據(jù)庫里面了，可以用Promise解決，在保證效率的同時達(dá)到目的。如下代碼所示： 

??

10. 分布式數(shù)據(jù)庫

—如果網(wǎng)站日訪問量太大，一個數(shù)據(jù)庫服務(wù)很可能會扛不住，需要搞幾臺相同的數(shù)據(jù)庫服務(wù)器分擔(dān)壓力，但是要保證這幾個數(shù)據(jù)庫數(shù)據(jù)一致性。這個有很多解決方案，最簡單的如mysql的repliaction： 

??

假設(shè)線上有3個數(shù)據(jù)庫，用戶的一個操作寫到了其中的一個數(shù)據(jù)庫里面，這個庫就叫主庫master，其它兩個庫叫從庫slave，主庫會把新數(shù)據(jù)遠(yuǎn)程復(fù)制到另外兩個從庫。

11. 數(shù)據(jù)庫備份

談到數(shù)據(jù)庫離不開另外一個話題——備份，備份很重要，假設(shè)你的網(wǎng)站某一天被攻擊了，一夜之間幾十萬個用戶的數(shù)據(jù)沒了，要是找不回來，或者寫了十年的博客全沒了，就真的得一夜白頭了。例如筆者會不對期地對自己的博客網(wǎng)站做備份： 

??

用wordpress和db的備份文件，可以在一個小時之內(nèi)從0恢復(fù)整個博客網(wǎng)站。

備份mysql數(shù)據(jù)庫可以執(zhí)行mysqldump的命令，以root用戶的身份：

mysqldump order > order.bak.mysql –u root –p

就可以把order這個數(shù)據(jù)庫備份起來，恢復(fù)的時候只需執(zhí)行：

mysql -u root -p < order.bak.mysql

就可以把order這個數(shù)據(jù)庫導(dǎo)進來。

綜合以上，本文談到了本地存儲的三種方式：

1. localStorage/sessionStorage
2. Web SQL
3. IndexedDB

并比較了它們的特點。還談了下DB結(jié)合Promise做一些操作和SQL注入等。

最主要是分析了關(guān)系型數(shù)據(jù)庫和非關(guān)系型數(shù)據(jù)庫的特點，關(guān)系型數(shù)據(jù)庫是一名老將，而非關(guān)系型隨著大數(shù)據(jù)的產(chǎn)生應(yīng)運而生，但它又不局限于在大數(shù)據(jù)上使用。html5也增加了這兩種類型的數(shù)據(jù)庫，為做Web Application做好準(zhǔn)備。雖然Web SQL很早前被deprecated，但是只要你不用支持IE和Firefox還是可以用的，它的好處是查詢比較方便，而IndexedDB存儲比較靈活，查詢不方便。說不定在不久的將來會有一種全新的web關(guān)系型數(shù)據(jù)庫出現(xiàn)。現(xiàn)在很多網(wǎng)站都使用IndexedDB存儲它們的數(shù)據(jù)。

所以可以兩者嘗試學(xué)習(xí)和使用一下，一方面為做那種數(shù)據(jù)驅(qū)動類型的網(wǎng)頁提供便利，另一方面可以對數(shù)據(jù)庫的概念有所了解，知道后端是如何建表如何查詢數(shù)據(jù)返回給你的。