HTML5 Web 存儲
使用HTML5可以在本地存儲用戶的瀏覽數據。
早些時候,本地存儲使用的是cookies。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用於用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.
數據以 鍵/值 對存在, web網頁的數據只允許該網頁訪問使用。
本地存儲的背景
眾所周知Html4時代Cookie的大小、格式、存儲數據格式等限制，網站應用如果想在瀏覽器端存儲用戶的部分信息，那么只能借助於Cookie。但是Cookie的這些限制，也就導致了Cookie只能存儲一些ID之類的標識符等簡單的數據，復雜的數據就更別扯了。
下面是Cookie的限制：
- 1, 大多數瀏覽器支持最大為 4096 字節的 Cookie。
- 2, 瀏覽器還限制站點可以在用戶計算機上存儲的 Cookie 的數量。大多數瀏覽器只允許每個站點存儲 20 個 Cookie；如果試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。
- 3, 有些瀏覽器還會對它們將接受的來自所有站點的 Cookie 總數作出絕對限制，通常為 300 個。
- 4, Cookie默認情況都會隨着Http請求發送到后台服務器，但並不是所有請求都需要Cookie的，比如：js、css、圖片等請求則不需要cookie。
Html5的設計者們，一開始就為Html5能成為富客戶端做好了准備。為了破解Cookie的一系列限制，Html5通過JS的新的API就能直接存儲大量的數據到客戶端瀏覽器，而且支持復雜的本地數據庫，讓JS簡直就是逆天了。Html5支持兩種的WebStorage，一種是永久性的本地存儲（localStorage），另外一種是會話級別的本地存儲（sessionStorage）。
代碼加注釋來了......
/** * sessionStorage,localStorage統一的操作方法： * （1）setItem(key,value)：添加本地存儲數據。 * （2）getItem(key):通過key獲取相應的Value。 * （3）removeItem(key):通過key刪除本地數據。 * （4）clear():清空數據。 */
/** * 會話級別的本地存儲：sessionStorage */ sessionStorage.setItem(11,"a"); var numLocal = sessionStorage.getItem(11); console.info("sessionStorage會話級別的本地存儲"+numLocal); sessionStorage.setItem(22,"b"); console.info("sessionStorage會話級別的本地存儲個數："+sessionStorage.length); sessionStorage.removeItem(22); console.info("sessionStorage會話級別的本地存儲個數："+sessionStorage.length); //sessionStorage.clear();
console.info("sessionStorage會話級別的本地存儲個數："+sessionStorage.length); /** * 永久本地存儲：localStorage */ localStorage.setItem("a",11); var numLocal = localStorage.getItem("a"); console.info("localStorage永久本地存儲"+numLocal); localStorage.setItem("b",22); console.info("localStorage本地存儲個數："+localStorage.length); localStorage.removeItem("a"); console.info("localStorage本地存儲個數："+localStorage.length); //localStorage.clear();
console.info("localStorage本地存儲個數："+localStorage.length);
HTML5 Web SQL 數據庫
Web SQL 數據庫 API 並不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端數據庫的 APIs。
如果你是一個 Web 后端程序員，應該很容易理解 SQL 的操作。
Web SQL 數據庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。
代碼加注釋來了......
/** * 本地數據庫 * 操作本地數據庫的最基本的步驟是： * 第一步：openDatabase方法：創建一個訪問數據庫的對象。 * 第二步：使用第一步創建的數據庫訪問對象來執行transaction方法，通過此方法可以設置一個開啟事務成功的事件響應方法，在事件響應方法中可以執行SQL. * 第三步：通過executeSql方法執行查詢，當然查詢可以是：CRUD。 */
function dataBaseCRUD(){ var dataBase = openDatabase("school", "1.0", "學校數據庫", 1024 * 1024, function () { console.info("創建學校數據庫成功！"); }); /** * （1）openDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，它還可以創建數據庫。幾個參數意義分別是： * 1，數據庫名稱。 * 2，數據庫的版本號，目前來說傳個1.0就可以了，當然可以不填； * 3，對數據庫的描述。 * 4，設置分配的數據庫的大小（單位是kb）。 * 5，回調函數(可省略)。 */
if(!dataBase){ console.info("當前瀏覽器不支持Html5本地數據庫"); return false; }else{ debugger; dataBase.transaction(function (ts) {//啟動一個事務，並設置回調函數
ts.executeSql("create table if not exists Student(id int,name text null,age int,sex text null)",[],function(ts,result){ console.info("創建數據庫成功"+result); },function(ts,message){ console.info("創建數據庫失敗",message); }); }); dataBase.transaction(function (ts) { ts.executeSql("insert into Student(id,name,age,sex) values(?,?,?,?) ", [1,"小明", 21, "男"], function (ts, result) { console.info("插入數據成功！"+result); }, function (ts, message) { console.info("插入數據失敗！"+message); }); }); dataBase.transaction(function (ts) { ts.executeSql("insert into Student(id,name,age,sex) values(?,?,?,?) ", [2,"小紅", 20, "女"], function (ts, result) { console.info("插入數據成功！"+result); }, function (ts, message) { console.info("插入數據失敗！"+message); }); }); dataBase.transaction(function (ts) { ts.executeSql("update Student set name = ? where id = ? ", ["小紅s",2], function (ts, result) { console.info("更新數據成功！"+result); }, function (ts, message) { console.info("更新數據失敗！"+message); }); }); dataBase.transaction(function (ts) { ts.executeSql("delete from Student where id = ? ", [2], function (ts, result) { console.info("刪除數據成功！"+result); }, function (ts, message) { console.info("刪除數據失敗！"+message); }); }); dataBase.transaction(function (ts) { ts.executeSql("select * from Student ", [], function (ts, result) { if (result) { for (var i = 0; i < result.rows.length; i++) { console.info((result.rows.item(i))); } } console.info("查詢數據成功！"); }, function (ts, message) { console.info("查詢數據失敗！"+message); }); }); } /** * （2）db.transaction方法可以設置一個回調函數，此函數可以接受一個參數就是我們開啟的事務的對象。然后通過此對象可以進行執行Sql腳本，跟下面的步驟可以結合起來。 * （3）通過executeSql方法執行查詢。 * ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler) * 參數說明： * 1，sqlQuery：需要具體執行的sql語句，可以是create、select、update、delete； * 2，[value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將s>語句中所要使用的參數先用“?”代替，然后依次將這些參數組成數組放在第二個參數中 * 3，dataHandler：執行成功是調用的回調函數，通過該函數可以獲得查詢結果集； * 4，errorHandler：執行失敗時調用的回調函數； * */ } dataBaseCRUD();