Web 存儲

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的用法:

1. var db = openDatabase('myDb', '1.0', 'Test DB', 1024);
   該方法有接受四個參數:
   1. 數據庫名稱
   2. 數據庫版本
   3. 數據庫描述
   4. 數據庫大小。
   方法的返回值是建立後的數據庫訪問對象，若是該數據庫不存在，會自動建立它。

2. db.transaction(function(tx) { tx.executeSql(......); }
   該方法能夠接受三個參數:
   1. 事務內容的一個方法(參數爲事務上下文對象)
   2. 事務執行成功的回調
   3. 事務失敗的回調。
   使用事務處理能夠防止在對數據庫進行訪問的時候和操做的時候不受到外界的干擾，在Web上，同時
   會有好多用戶對頁面進行訪問。

3. tx.executeSql('insert ... values(?)',[name], dataHandler, errorHandler')
   該方法也接受四個參數:
   1. 要執行的sql語句
   2. 用於替換sql語句中 ? 參數
   3. 執行成功的回調函數，回調函數有兩個參數，第一個是 transaction對象，第二個是操做結果對象
   4. 回調函數有兩個參數，回調函數有兩個參數，第一個是 transaction對象，第二個是錯誤消息