Web Storage
介紹
Web storage 是在web上存儲數據的功能，這裏的存儲是針對客戶端來說的. 具體說分爲兩種:
- seesionStorage
數據存儲在 session 對象中。session，是指用戶打開瀏覽器窗口瀏覽網站，從進入網站到關閉
這個窗口所經過的這段時間。seesion 對象可以用來保存這段時間所有的數據。 - localStorage
近數據持久化在客戶端本地，即使瀏覽器關閉了，該數據也會存在，下次打開瀏覽器訪問，數據也
會存在。
用法
它們兩個有非常相似的 API , 它們主要存儲 key-value 結構:
| sessionStorage | localStorage | 功能 |
|---|---|---|
| setItem(key,value) | setItem(key,value) | 保存數據 |
| getItem(key) | getItem(key) | 獲取數據 |
| removeItem(key) | removeItem(key) | 移除數據 |
| 窗口關閉 | clear() | 清空數據 |
它們兩個共同監聽 window.storage 事件，當 sessionStorage 和 localStorage 數組發生改
變的時候執行回調。示例代碼:
window.addEventListener('storage', function(event){ //當 storage 的數據發生變化是執行 });
在事件處理函數中，事件 event 對象有下面幾個屬性
- event.key 在 storage 中數據被修改的鍵值
- event.oldValue 在 storage 中數據被修改前的值
- event.newValue 在 storage 中數據被修改後的值
- event.url 在 storage 中頁面URL地址
- evnet.storageArea 當前變動的 sessionStorage 或 localStorage
注: 它們兩個的 value 值不能接受JSON對象，只能存儲字符串。所有保存對象的時候我們可以藉助
JSON.stringify 和 JSON.parse 這兩個方法來實現。
WebSql
介紹
html5 中大大豐富了客戶端本地可以存儲內容，添加了很多功能將原本必須保存在服務器上的數據轉爲保存在客戶端，從而提供 Web 程序的性能，減輕服務器的負擔。WebSql 的規範使用的是SQLLite，但可悲的是 Firefox 和 IE 瀏覽器都不支持， W3C 官方在 2011 年 11 月聲明已經不再維護 Web SQL Database 規範，由於其廣泛的實現程度，瞭解這些 API 對 Web 開發還是非常有必要的。
用法
提供了三個重要的API，大致先簡單介紹下:
- openDatabase 創建一個訪問數據庫的對象
- transaction 用來執行事務處理，控制事務提交或回滾
- executeSql 用來執行Sql
接下來我們詳細說一下每個API的用法:
var db = openDatabase('myDb', '1.0', 'Test DB', 1024);
該方法有接受四個參數:
1. 數據庫名稱
2. 數據庫版本
3. 數據庫描述
4. 數據庫大小。
方法的返回值是創建後的數據庫訪問對象，如果該數據庫不存在，會自動創建它。db.transaction(function(tx) { tx.executeSql(......); }
該方法可以接受三個參數:
1. 事務內容的一個方法(參數爲事務上下文對象)
2. 事務執行成功的回調
3. 事務失敗的回調。
使用事務處理可以防止在對數據庫進行訪問的時候和操作的時候不受到外界的干擾，在Web上，同時
會有好多用戶對頁面進行訪問。tx.executeSql('insert ... values(?)',[name], dataHandler, errorHandler')
該方法也接受四個參數:
1. 要執行的sql語句
2. 用於替換sql語句中 ? 參數
3. 執行成功的回調函數，回調函數有兩個參數，第一個是 transaction對象，第二個是操作結果對象
4. 回調函數有兩個參數，回調函數有兩個參數，第一個是 transaction對象，第二個是錯誤消息