در این مقاله نشان می دهیم که چگونه داده را درinsert ,Update ، database و Delete کنیم.

ابتدا یک table ایجاد می‌کنیم و داده‌هایی‌ را در آن وارد می‌کنیم.داده به عنوان خروجی نشان داده خواهد شد و سپس با استفاده از دکمه‌های edit و delete ، داده را edit و delete می‌کنیم،همانند زیر:

حالا کد را به صورت زیر می‌نویسیم،برای ایجاد form از روش زیر استفاده می‌کنیم.
مرحله ۱: ابتدا control‌ها را ایجاد می‌کنیم(یعنی‌ همان textbox‌ها و button‌ها برای  insert کردن داده )
 

<div>
    <h1>Insert Data, Update Data and Delete Data In HTML5</h1>
    <input type="hidden" id="id" />
    <b>First name:</b><input type="text" id="firstName" /><br />
    <b>Last name:</b><input type="text" id="lastName" /><br />
    <b>City:</b><input type="text" id="city" /><br />
    <b>State:</b><input type="text" id="state" /><br />
    <b>Phone:</b>
    <input type="text" id="phone" /><br />
    <b>Email:</b><input type="text" id="email" /><br />
    <button onclick="InsertData()">Insert Data</button>
    <button onclick="UpdateData()">Update Data</button>
    <button onclick="ClearData()">Clear</button>
    <br />
    <br />
    <br />
    <div id="details"></div>
</div>

در اینجا فیلد id را به عنوان hidden field در نظر می‌‌گیریم،چون در این مثال id به صورت اتوماتیک افزایش پیدا می‌کند.
مرحله۲: حالا کد زیر را در تگ  <script> می‌نویسیم:

<script>
    var id = document.getElementById('id');
    var firstName = document.getElementById('firstName');
    var city = document.getElementById('city');
    var state = document.getElementById('state');
    var email = document.getElementById('email');
    var lastName = document.getElementById('lastName');
    var phone = document.getElementById('phone');
    var results = document.getElementById('details');
</script>

در این کد برای هر فیلد یک متغیر تعریف می‌‌شود.
حالا database را به صورت زیر ایجاد می‌کنیم:
 

var db = openDatabase("MYDATABASE", "1.0", "MYDB", 4 * 1024 * 1024);
var mydata;
CreateTable();
function CreateTable() {
      db.transaction(function (tx) {
          tx.executeSql("create table if not exists Emp (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT,city TEXT,state TEXT, phone TEXT,email TEXT)");
      });
}

در کد بالا ما یک table به نام Emp ایجاد کردیم که در آن id را به عنوان کلید اصلی‌ گرفته ایم ،این کار برای delete و update کردن داده در databse قابل استفاده است.
حالا متد ()ShowData را می‌نویسیم که به وسیله آن داده‌ها را نشان می‌‌دهیم:

 

function ShowData() {
        results.innerHTML = '';
        db.transaction(function (tx) {
            tx.executeSql("SELECT * FROM Emp", [], function (tx, result) {
                mydata = result.rows;
                for (var i = 0, item = null; i < mydata.length; i++) {
                    item = mydata.item(i);
                    results.innerHTML +=
                    '<b>First Name : </b>' + item['firstName'] + ' , ' + '<b>Last Name :</b> ' + item['lastName'] + ' , ' + '<b>City : </b>' + item['city'] + ' , ' + '<b>State :</b>' + item['state'] + ' , ' + '<b>Phone: </b>' + item['phone'] + ' , ' + '<b>Email : </b>' + item['email'] + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img height="20" width="20" src="Edit.jpg" onclick="LoadMyData(' + i +
')" />' +
                    '<img height="20" width="20" src="delete.jpg" onclick="deleteRecord(' + item['id'] + ')" /><br/>';
                }
            });
        });
    }

در کد بالا ابتدا داده را از جدول Emp می گیریم و سپس آن را نشان می دهیم.در اینجا از دو عکس استفاده می‌کنیم ،یکی‌ برای edit و دیگری برای delete.
سپس دو متد می‌نویسیم ،یکی‌ از آنها ()LoadMyData و دیگری ()deleteData است.
ابتدا با متد ()LoadMyData شروع می‌کنیم که برای load شدن داده در textbox‌ها مورد استفاده قرار می‌گیرد:

function LoadMyData(i) {
     var item = mydata.item(i);
     firstName.value = item['firstName'];
     lastName.value = item['lastName'];
     city.value = item['city'];
     state.value = item['state'];
     phone.value = item['phone'];
     email.value = item['email'];
     id.value = item['id'];
 }

سپس متد ()deleteData را می‌نویسیم ،با این کار وقتی‌ روی delete کلیک کنیم ، همان رکورد مورد نظر از database حذف میشود:

function deleteData(id) {
      var deleteStatement = "delete from Emp where id=?";
      db.transaction(function (tx) {
          tx.executeSql(deleteStatement, [id], ShowData(), ShowErrorMessage);
      });
     ClearData();
} 
function ClearData() {
     firstName.value = '';
     lastName.value = '';
     city.value = '';
     state.value = '';
     email.value = '';
     phone.value = '';
     id.value = '';
}

مرحله ۳: حالا کدد insert به database را می‌نویسیم:

<button onClick="InsertData()">Insert Data</button>

function InsertData() {
      var insertStatement = "insert into Emp (firstName, lastName,city,state,phone,email) values (?, ?, ?,?,?,?)";
      db.transaction(function (tx) { 
          tx.executeSql(insertStatement, [firstName.value, lastName.value, city.value, state.value, phone.value, email.value], showdatacleardata, ShowErrorMessage);
     });
}

با این روش داده را به insert  ، database می‌کنیم.

مرحله۴ : حالا کدی می‌نویسیم که داده Update شود:

function UpdateData() {
      var updateStatement = "UPDATE Emp SET firstName = ?, lastName = ?,city=?,state=? ,phone = ?,email=? WHERE id = ?";
      db.transaction(function (tx) { 
          tx.executeSql(updateStatement, [firstName.value, lastName.value, city.value, state.value, phone.value, email.value, id.value], showdatacleardata, ShowErrorMessage);
      });
}

توسط این کود به راحتی‌ می‌‌توانیم داده را در  update ، database کنیم.پس هنگامی که روی دکمهٔ Edit کلیک کنیم ،داده‌ها درون textbox‌ها نمایان میشوند ،بعد از اینکه edit را انجام دادیم با زدن دکمهٔ update ،داده‌های ما update میشوند.