HTML5的localStorage、sessionStorage和SQL的CRUD的使用，localstoragecrud
一、本機存放區由來的背景
眾所周知Html4時代Cookie的大小、格式、儲存資料格式等限制，網站應用程式如果想在瀏覽器端儲存使用者的部分資訊，那麼只能藉助於Cookie。但是Cookie的這些限制，也就導致了Cookie只能儲存一些ID之類的標識符等簡單的資料，複雜的資料就更別扯了。
下面是Cookie的限制：
Html5的設計者們，一開始就為Html5能成為富用戶端做好了準備。為了破解Cookie的一系列限制，Html5通過JS的新的API就能直接儲存大量的資料到用戶端瀏覽器，而且支援複雜的本機資料庫，讓JS簡直就是逆天了。Html5支援兩種的WebStorage，一種是永久性的本機存放區（localStorage），另外一種是會話層級的本機存放區（sessionStorage）。
二、會話層級的本機存放區：sessionStorage在Html5中增加了一個Js對象：sessionStorage；通過此對象可以直接操作儲存在瀏覽器中的會話層級的WebStorage。儲存在sessionStorage中的資料首先是Key-Value形式的，另外就是它跟瀏覽器當前會話相關，當會話結束後，資料會自動清除，跟未設定到期時間的Cookie類似。
sessionStorage提供了四個方法來輔助我們進行對本機存放區做相關操作。
<script type="text/javascript"> //添加key-value 資料到 sessionStorage sessionStorage.setItem("demokey", "http://blog.itjeek.com"); //通過key來擷取value var dt = sessionStorage.getItem("demokey"); alert(dt); //清空所有的key-value資料。 //sessionStorage.clear(); alert(sessionStorage.length); </script>對於JS的學習和調試必須得有Chrome的調試工具輔助才能事半功倍。當然Chrome也是我最喜愛的Web開發協助工具輔助，非常簡單F12快速鍵就立即開啟工具了，包括IE也是這個快速鍵。通過就可以查看當前瀏覽器中的sessionStorage資料。
參考線上示範demo
三、永久本機存放區：localStorage在最新的JS的API中增加了localStorage對象，以便於使用者儲存永久儲存的Web端的資料。而且資料不會隨著Http請求發送到後台伺服器，而且儲存資料的大小機會不用考慮，因為在HTML5的標準中要求瀏覽器至少要支援到4MB.所以，這完全是顛覆了Cookie的限制，為Web應用在本機存放區複雜的使用者痕迹資料提供非常方便的支援人員。那接下裡分別介紹一下localStorage的常用的方法，當然基本上跟sessionStorage是一致的。
localStorage提供了四個方法來輔助我們進行對本機存放區做相關操作。
<script type="text/javascript"> //添加key-value 資料到 sessionStorage localStorage.setItem("demokey", "http://blog.itjeek.com"); //通過key來擷取value var dt = localStorage.getItem("demokey"); alert(dt); //清空所有的key-value資料。 //localStorage.clear(); alert(localStorage.length); </script>
線上示範Demo
四、逆天了本機資料庫雖然Html5已經提供了功能強大的localStorage和sessionStorage，但是他們兩個都只能提供儲存簡單資料結構的資料，對於複雜的Web應用的資料卻無能為力。逆天的是Html5提供了一個瀏覽器端的資料庫支援，允許我們直接通JS的API在瀏覽器端建立一個本地的資料庫，而且支援標準的SQL的CRUD操作，讓離線的Web應用更加方便的儲存結構化的資料。接下裡介紹一下本機資料的相關API和用法。
操作本機資料庫的最基本的步驟是：
接下來分別介紹一下相關的方法的參數和用法。
（1）openDatabase方法：
//Demo：擷取或者建立一個資料庫，如果資料庫不存在那麼建立之var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });
openDatabase方法開啟一個已經存在的資料庫，如果資料庫不存在，它還可以建立資料庫。幾個參數意義分別是：
（2）db.transaction方法可以設定一個回呼函數，此函數可以接受一個參數就是我們開啟的事務的對象。然後通過此對象可以進行執行Sql指令碼，跟下面的步驟可以結合起來。
（3）通過executeSql方法執行查詢。
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)參數說明：
<head> <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> function initDatabase() { var db = getCurrentDb();//初始化資料庫 if(!db) {alert("您的瀏覽器不支援HTML5本機資料庫");return;} db.transaction(function (trans) {//啟動一個事務，並設定回呼函數 //執行建立表的Sql指令碼 trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) { }, function (trans, message) {//訊息的回呼函數alert(message);}); }, function (trans, result) { }, function (trans, message) { }); } $(function () {//頁面載入完成後綁定頁面按鈕的點擊事件 initDatabase(); $("#btnSave").click(function () { var txtName = $("#txtName").val(); var txtTitle = $("#txtTitle").val(); var txtWords = $("#txtWords").val(); var db = getCurrentDb(); //執行sql指令碼，插入資料 db.transaction(function (trans) { trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) { }, function (ts, message) { alert(message); }); }); showAllTheData(); }); }); function getCurrentDb() { //開啟資料庫，或者直接連接資料庫參數：資料庫名稱，版本，概述，大小 //如果資料庫不存在那麼建立之 var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ; return db; } //顯示所有資料庫中的資料到頁面上去 function showAllTheData() { $("#tblData").empty(); var db = getCurrentDb(); db.transaction(function (trans) { trans.executeSql("select * from Demo ", [], function (ts, data) { if (data) { for (var i = 0; i < data.rows.length; i++) { appendDataToTable(data.rows.item(i));//擷取某行資料的json對象 } } }, function (ts, message) {alert(message);var tst = message;}); }); } function appendDataToTable(data) {//將資料展示到表格裡面 //uName,title,words var txtName = data.uName; var txtTitle = data.title; var words = data.words; var strHtml = ""; strHtml += "<tr>"; strHtml += "<td>"+txtName+"</td>"; strHtml += "<td>" + txtTitle + "</td>"; strHtml += "<td>" + words + "</td>"; strHtml += "</tr>"; $("#tblData").append(strHtml); } </script></head> <body> <table> <tr> <td>使用者名稱：</td> <td><input type="text" name="txtName" id="txtName" required/></td> </tr> <tr> <td>標題：</td> <td><input type="text" name="txtTitle" id="txtTitle" required/></td> </tr> <tr> <td>留言：</td> <td><input type="text" name="txtWords" id="txtWords" required/></td> </tr> </table> <input type="button" value="儲存" id="btnSave"/> <hr/> <input type="button" value="展示所喲資料" onclick="showAllTheData();"/> <table id="tblData"> </table> </body></html>執行的效果
線上示範Demo
本文永久地址：更好的觀看效果和體驗！Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
