濟南網站建設知名品牌，首屈一指的高端品牌濟南網站建設中國旗艦級濟南網站建設服務商，重視用戶體驗，創意，設計，開發。9.2實例21：在客戶端關系數據庫中保存數據 localStorage和sessionStorage為我們提供了在客戶端計算機上保存簡單名／值對數據的一種簡便方法，但有時候這是遠遠不夠的。起初，在關系數據庫中存儲數據的能力是在HTML5規范中引入的。后來這部分發展成了一份獨立的規范，名為Web SQL Storagem。只要開發人員有編寫SQL代碼的基礎，它使用起來就會非常順手。為方便演示，這里將使用Web SQL Storage來創建、獲取、更新和刪除客戶端數據庫中的信息。9.2.1 瀏覽器中的CRUD 所謂CRUD，是“Create、Retrieve、Update和Delete”。的簡稱，即創建、獲取、更新和刪除，恰恰講述了我們使用客戶端數據庫會做的事情。通過其規范和實現，我們可以對數據進行增刪改查的操作。 AwesomeCo希望用一款可以在銷售人員外出時收集留言的簡單應用來武裝自己的銷售隊伍。這個應用建好以后，不僅可以讓用戶創建新留言，還可以使之更新和刪除已有的留言。要更改已有的留言，我們就需要讓用戶能先從數據庫中將其取出來。 下面的SQL語句兢是我們要用到的。類 型 語 句創建留言獲取所有留言獲取特定留言更新留言刪除留言INSERT INTO notes (title, note) VALUES("Test", "This is a note")SELECT id, title, note FROM notes;SELECT id, title, note FROM notes where id = 1;UPDATE notes set title = "bar", note = "Changed" where id =1;DELETE FROM notes where id = 1:壇小喬愛問…一< Web SQL Databases規范不是已經夭折了嗎7 在2010年11月，維護這一規范的工作組宣稱不再推進Web SQL Databases，將注意力轉向了IndexedDB規范。我們之所以還在這里討論Web SQL Databases，是因為基于Webkit的瀏覽器已經實現了此功能，包括所有iOS和Android設備、Safari以及Google Chrome。截至本書編寫之時，還沒有任何一種瀏覽器支持IndexedDB，但我們的項目中馬上可以使用到WebSQL Databases，這或許是滿足我們需求的正確之選。①參見http://dev.w3.org/htm15/webdatabase/.③也可以表示“Create、Read、Update和Destroy”，即創建、讀取、更新和銷毀。136◆第9章客戶端數據的使用9.2.2留言的前端展現留言系統的前端左側是一個側邊欄，其中是羅列出留言的列表，右側包含一個標題域和用于編寫留言的大文本框。效果見圖9-2。* Firn nore* Sccond note^；a^面ere呲Noic首先，我們需要編寫界面：Download htm15sql/index.html< ! doctype html>圖9-2留言系統界面<html><head><title>AwesomeNotes</title> <link rel="stylesheet" href="style.css"><script type="text/javascr/pt"charset="utf-8"src= "http://a jax.goog7eapis.com/a jax/7 ibs/jquer y/1.4.2ljquery.min. js "></script><script type="text/javascr/pt" charset= "utf-8" src="javascripts/notes. js"></script></head><body> <section id="sidebar"> <input type="button" id="new_button" value="New note"> <ul id="notes"></ul></section><section id="main"><form><ol><li><input<input</li><li><label<input</li><li>9.2實例21:在客戶端關系數據庫中保存數據●137type="submit" id="save_button" value="Save">type="submit" id="delete_button" value="Delete">for="title">Title</label>type="text" id="title"> <label for="note">Note</label> <textarea id="note"></textarea> </li> </ol></form></section></body></htrril>我們使用section標簽定義側邊欄和主體區域，并且為每個重要的用戶界面控件指定了ID，例如Save（保存）按鈕等。這樣做可方便我們定位元素，以便為其附加事件監聽器。我們還需要一個樣式表，這樣才能達到示例圖中的顯示效果。style．css如下所示：Download htm15sqUstyle.css#sidebar, #main{ display: block; float: left;#sidebar{ width: 25%;}#main{ width: 75%;}form ol{ list-style: none margin: 0; padding: 0;}138◆第9章客戶端數據的使用form li{ padding: 0; margin: 0;form li label{display:block;}#title, #note{ width: 100%; font-size: 20px; border: 1px solid #OOO;}#title{ height: 20px;}#note{ height: 40px;這份樣式表禁用了項目符號，定義了文本域的大小，將元素分成了兩列。至此，前端代碼就完成了。接下來要做的是搭配JavaScript代碼來讓其發揮作用。9.2.3連接數據庫我們需要建立連接并創建一個數據庫：Download html5sql門avascripts/notesjs／／數據庫引用var db=null：／／創建到本地數據庫的連接connectToDB=function(){ db=window.openDatabase( 'awesome_notes’, 'l.0’， ’AwesomeNotes Database’, 1024*1024*3);)：首先，我們在腳本頂部聲明了db變量。這樣在我們創建的其余所有方法中它都會有效。。然后我們使用州ndow.openDatabase萬法聲明了連接到數據庫的方法。這里使用的參數有數據庫名稱、版本號、描述以及描述大小的參數。①這樣做創建的是全局變量，但是通常不推薦使用。這里只是為了讓JavaScript代碼能夠簡潔易辨。
夢之網科技 http://www.aecov.cn