HTML5 Lưu trữ dữ liệu web


Bài trước, chúng ta đã tìm hiểu một đặc điểm thú vị của HTML5: hỗ trợ vẽ các đối tượng 2D thông qua thẻ canvas. Hôm nay, chúng ta lại tiếp cận một API mới của HTML5, lưu trữ dữ liệu web ở phía máy khách.

Lưu trữ web là một đặc điểm kỹ thuật được đưa ra bởi W3C, hỗ trợ việc lưu trữ dữ liệu tại phiên làm việc của người dùng hoặc lưu trữ trong thời gian lâu dài. Nó cho phép lưu trữ 5 MB thông tin cho mỗi tên miền.

Có 2 loại:

  • sesionStorage: lưu trữ dữ liệu trong một phiên làm việc (sẽ bị xóa khi đóng cửa sổ trình duyệt)

Ví dụ: xây dựng phiên làm việc của người dùng sau khi đăng nhập, …

  • localStorage: lưu trữ cục bộ (thông tin được lưu trữ lâu dài, không giới hạn thời gian)

Ví dụ: đếm số lần người dùng đã truy cập trang; ghi nhớ thông tin tài khoản, mật khẩu cho lần đăng nhập sau, …

Trước khi sử dụng sessionStorage và localStorage, chúng ta phải kiểm tra trình duyệt hiện tại có hỗ trợ 2 dạng lưu trữ này không?
Code tham khảo kiểm tra trình duyệt:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kiểm tra lưu trữ phiên</title>
<script>
function checkSupport()
{
	if (('sessionStorage' in window) && window['sessionStorage'] !== null)
    {
    	alert("Trình duyệt hỗ trợ lưu trữ web");
        return;
    }
    alert("Trình duyệt không hỗ trợ lưu trữ web"); 
}
</script>
</head>

<body onLoad="checkSupport()">
</body>
</html>

Để kiểm tra localStorage trong trình duyệt: thay đổi dòng code:

if (('sessionStorage' in window) &amp;amp;&amp;amp; window['sessionStorage'] !== null)

thành

if (('localStorage' in window) &amp;amp;&amp;amp; window['localStorage'] !== null)

1. Cách lưu trữ dữ liệu:

Có 3 cách để lưu trữ:

  • Thông qua các hàm hỗ trợ sẵn: lưu trữ dạng key/value (biến/giá trị)
    + Gán giá trị cho biến: sessionStorage.setItem(“key”) = value (key,value có thể là chuỗi hoặc số)
    sessionStorage.setItem(‘name’, ‘user’)
    + Lấy giá trị của biến: sessionStorage.getItem(“key”)
    sessionStorage.getItem(‘name’)
    + Xóa một giá trị biến đã tạo: sessionStorage.removeItem(“key”)
    sessionStorage.removeItem(‘name’)
    + Xóa tất cả các biến đã tạo: sessionStorage.clear()
  • Thông qua cú pháp mảng: sessionStorage[“key”] = value
    sessionStorage[‘name’] = ‘user’
  • Thông qua toán tử dấu chấm: sessionStorage.key = value
    sessionStorage.name = “user”

Ghi chú: 3 cách lưu trữ này cũng áp dụng cho localStorage

Ví dụ đơn giản để lưu trữ dữ liệu:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Working with Session Storage</title>
<script>
function testStorage()
{
	if(('sessionStorage' in window) && window['sessionStorage'] != null){
		sessionStorage.setItem('name', 'Sarah');
		document.write("The name is:" + sessionStorage.getItem('name') + "
");
		sessionStorage.setItem(6, 'Six');
		document.write("The number 6 is : " + sessionStorage.getItem(6) + "
");
		sessionStorage["age"] = 20;
		document.write("The age is : " + sessionStorage.age);
	}
}
</script>
</head>

<body onLoad="testStorage()">
</body>
</html>

Kết quả:

1

2. Ví dụ: Sử dụng sessionStorage để tạo phiên làm việc khi người dùng đăng nhập:

Kịch bản xử lý như sau:

  • Tạo form đăng nhập.
  • Tạo một trang thanhcong.html để hiển thị thông báo đăng nhập thành công.
  • Nếu người dùng chưa đăng nhập -> hiển thị trang thanhcong.html thì có thông báo “Bạn chưa đăng nhập”
  • Nếu người dùng vào trang đăng nhập rồi tiến hành đăng nhập -> sau khi đăng nhập thành công, qua trang thanhcong.html và hiển thị “Chúc mừng bạn tên đăng nhập đã đăng nhập thành công”.

Code:

Trang đăng nhập (dangnhap.html)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Phiên làm việc người dùng</title>
<script>
function kiemTra()
{
	//kiem tra du lieu
	if(('sessionStorage' in window) && window['sessionStorage'] !== null){
		// bỏ qua bước bắt lỗi tài khoản, mật khẩu
		
		// tạo sessionStorage với key là user lưu tài khoản người dùng
		sessionStorage.setItem('user', document.frm.txtTK.value);
		// tạo sessionStorage với key là pass lưu mật khẩu người dùng
		sessionStorage.setItem('pass', document.frm.txtMK.value);
		return true;
	}else alert("Không hỗ trợ");
}
</script>
</head>
<body >

<form name="frm" onSubmit="return kiemTra()" action="thanhcong.html">

<table>

<tr>

<td>Tài khoản:</td>


<td><input name="txtTK" /></td>

</tr>


<tr>

<td>Mật khẩu:</td>


<td><input name="txtMK" type="password"/></td>

</tr>


<tr align="center">

<td colspan="2"><input type="submit" value="Đăng nhập" /></td>

</tr>

</table>

</form>

</body>
</html>

Trang thông báo thành công (thanhcong.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Thanh cong</title>
<script>
if(sessionStorage.getItem('user') != null)
	document.write("Chúc mừng bạn " 
					+ sessionStorage.getItem('user') 
					+ " đã đăng nhập thành công");
else document.write('Bạn chưa đăng nhập');
/* Xử lý nút thoát : xóa biến lưu trữ user*/
function thoat(){
	sessionStorage.removeItem('user');
	location.href="thanhcong.html";
}
</script>
</head>

<body>

<form>
<input value="Thoát" type="button" onClick="thoat()" />
</form>

</body>
</html>

Video:

3. Ví dụ: Sử dụng localStorage để đếm số lần người dùng truy cập vào trang web:

Mỗi lần người dùng vào trang web:

  • Nếu là lần đầu tiên: khởi tạo biến localStorage[‘truy cập’] là 1.
  • Nếu là lần thứ 2 về sau: cộng thêm 1 vào biến localStorage[‘truy cập’]

Chú ý: Tắt trình duyệt và mở lên lại thì biến localStorage[‘truy cập’] vẫn cập nhật từ giá trị cũ.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Lưu trữ cực bộ</title>
<script>
function store()
{
	if(('localStorage' in window) && window['localStorage'] != null){
		if(localStorage.getItem('truycap') == null)
			localStorage.setItem('truycap', 1);
		else 
			localStorage.setItem('truycap', parseInt(localStorage.getItem('truycap')) + 1);
		document.write("Số lần đăng nhập = " + localStorage.getItem('truycap'));
		
	}
	else{
		alert("Trình duyệt không hỗ trợ LocalStorage");
	}
}
</script>
</head>
<body onLoad="store()">
</body>
</html>

Kết quả:
Lần chạy đầu tiên:
          Số lần đăng nhập = 1
Reload lại trang:
          Số lần đăng nhập = 2
Các lần chạy tiếp theo -> mỗi lần tăng lên 1.
Tắt trình duyệt và chạy lại trình duyệt vừa rồi:
          Số lần đăng nhập = 3
Các bạn có thể tham khảo thêm:
4. Ví dụ sử dụng localStorage để ghi nhớ thông tin đăng nhập:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Lưu trữ cực bộ</title>
<script>
function loadData(){
	if(('localStorage' in window) 
		&& window['localStorage'] != null 
		&& localStorage.getItem('ghinho')
		 ){
		document.frmDangNhap.txtDN.value = localStorage.getItem('tendangnhap');
		document.frmDangNhap.txtMK.value = localStorage.getItem('matkhau');
	}
}
function store()
{
	var tendangnhap = document.getElementById("txtDN").value;
	var matkhau = document.getElementById("txtMK").value;
	var ghinho = document.getElementById("chkGhiNho");
	if(('localStorage' in window) && window['localStorage'] != null){
		localStorage.setItem('tendangnhap', tendangnhap);
		localStorage.setItem('matkhau', matkhau);
		alert("Tên người dùng : " + localStorage.getItem('tendangnhap') + ", Mật khẩu : " + localStorage.getItem('matkhau'));
	}
	else{
		alert("Trình duyệt không hỗ trợ LocalStorage");
	}
	
	//ghi nho thong tin
	if(ghinho.checked)
	{
		localStorage.setItem('ghinho', 1);
	}
}
</script>
</head>
<body onLoad="loadData()" >

<form method="get" name="frmDangNhap" >

<table width="50%" border="1" align="center">

<tr>

<th colspan="2" scope="col">Đăng nhập </th>

    </tr>


<tr>

<td>Tên đăng nhập: </td>


<td><input type="text" id="txtDN" name="txtDN" /></td>

  </tr>


<tr>

<td>Mật khẩu:</td>


<td><input type="text" id="txtMK" name="txtMK" /></td>

  </tr>


<tr>

<td></td>


<td><input type="button" value="Đăng nhập" onClick="store();"/>
	<input type="checkbox" id="chkGhiNho" />Ghi nhớ thông tin</td>

  </tr>

</table>

</form>

</body>
</html>

Video tham khảo

Chúc các bạn hiểu được cơ bản về lưu trữ web trong HTML5

Advertisements

HTML5 – Xây dựng hình ảnh động đơn giản thông qua đối tượng canvas


Một tiện ích thú vị nhất của HTML5 là hỗ trợ vẽ các đối tượng 2D. Chúng ta có thể vẽ hình tròn, hình chữ nhật, đoạn thẳng, một tấm hình, text, … lên trang web thông qua các phương thức được hỗ trợ sẵn trong Canvas API của HTML5. Nâng cao hơn nữa, xây dựng một giao diện hoạt hình lên web.

Hôm nay, chúng ta sẽ tìm hiểu một ví dụ đơn giản nhất để có được một hình ảnh động.

Vẽ nhiều đối tượng lên một canvas
1

Để tạo được hoạt hình, chúng ta phải vẽ lại các đối tượng ở các vị trí khác nhau và lặp đi lặp lại việc vẽ này thông qua hàm setInterval trong Javascript.

Các bước thực hiện:

  • Tạo đối tượng canvas trong tài liệu để vẽ các hình.
  • Tạo hàm draw() để vẽ các đối tượng (mỗi lần vẽ một hình là một trạng thái -> thiết lập một biến có giá trị thay đổi để gán cho vị trí thay đổi).
  • Cứ mỗi 30/1000 giây sẽ gọi lại hàm draw() một lần để vẽ lại hình ảnh.

Code tham khảo:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Animation</title>

<style>
#mySwimmerCanvas{
	/*Hiển thị border của canvas*/
	border: 2px solid #FF0000
}
</style>

<script>
var positionX = 0;
var positionY = 0;
// Gọi lại hàm draw sau mỗi thời gian 30/1000 giây
setInterval(draw, 30);

//Hàm vẽ người
function draw(){
   var centerX = 200; // tọa độ x cho tâm của hình tròn thể hiện cái đầu
   var centerY = 50; // tọa độ y cho tâm của hình tròn thể hiện cái đầu
   var radius = 20;
   // thay đổi tọa độ x, y để thiết lập chuyển động hoạt hình
   if (positionX < 30) { positionX += 1; positionY += 1; } else { positionX = 0; positionY = 0; } // khai báo để vẽ các đối tượng 2d lên canvas var canvasSwimmer = document.getElementById("mySwimmerCanvas"); var contextSwimmer = canvasSwimmer.getContext("2d"); //xóa vị trí cũ để vẽ vị trí mới contextSwimmer.clearRect(0,0,400,400); //bắt đầu vẽ contextSwimmer.beginPath(); /*Vẽ đầu (hình tròn) centerX, centerY: tâm đường tròn radius: kích thước bán kính false: vẽ theo chiều kim đồng hồ */ contextSwimmer.arc(centerX, centerY+positionY, radius, 0, 2 * Math.PI, false); contextSwimmer.fillStyle = "#000000"; contextSwimmer.fill(); /* vẽ thân (đoạn thẳng) vẽ nhiều đối tượng lên một canvas -> mỗi đối tượng phải gọi beginPath() lại 
	*/
	contextSwimmer.beginPath(); 
	contextSwimmer.moveTo(200,70+positionY); // điểm thứ nhất để vẽ
	contextSwimmer.lineTo(200,175); // điểm thứ hai để vẽ
	contextSwimmer.lineWidth = 10; // độ rộng đoạn thẳng
	contextSwimmer.strokeStyle = "#000000";  // màu đoạn thẳng
	contextSwimmer.lineCap = "round"; // bo tròn hai đầu đoạn thẳng
	contextSwimmer.stroke(); // vẽ đoạn thẳng
	
	// vẽ cánh tay bên phải (đoạn thẳng)
	contextSwimmer.beginPath();
	contextSwimmer.moveTo(200, 100);
	contextSwimmer.lineTo(175-positionX,140-positionY);
	contextSwimmer.lineWidth = 10;
	contextSwimmer.strokeStyle = "#000000"; 
	contextSwimmer.lineCap = "round";
	contextSwimmer.stroke();
	
	// vẽ cánh tay bên trái (đoạn thẳng)
	contextSwimmer.beginPath();
	contextSwimmer.moveTo(200, 100);
	contextSwimmer.lineTo(225+positionX,140-positionY);
	contextSwimmer.lineWidth = 10;
	contextSwimmer.strokeStyle = "#000000"; 
	contextSwimmer.lineCap = "round";
	contextSwimmer.stroke();
	
	// vẽ chân bên phải (đoạn thẳng)
	contextSwimmer.beginPath();
	contextSwimmer.moveTo(200, 175);
	contextSwimmer.lineTo(190-positionX,250-positionY);
	contextSwimmer.lineWidth = 10;
	contextSwimmer.strokeStyle = "#000000"; 
	contextSwimmer.lineCap = "round";
	contextSwimmer.stroke();


   // vẽ chân bên trái (đoạn thẳng)
	contextSwimmer.beginPath();
	contextSwimmer.moveTo(200, 175);
	contextSwimmer.lineTo(210+positionX,250-positionY);
	contextSwimmer.lineWidth = 10;
	contextSwimmer.strokeStyle = "#000000"; 
	contextSwimmer.lineCap = "round";
	contextSwimmer.stroke();

}
</script>
</head>

<body onload="draw();">
<canvas id="mySwimmerCanvas" width="400" height="400" >
</canvas>
</body>
</html>

Sau khi hoàn thành (nhấp vào hình để xem kết quả hoàn chỉnh):
animation
Chúc các bạn thành công.

Tìm hiểu GOOGLE MAP API V3 – xây dựng ứng dụng đánh dấu các điểm trên bản đồ cùng với Google Map API, PHP, Mysql, XML


Một bài tham khảo về sử dụng dữ liệu bản đồ google (tham khảo)

  • Từ xưa tới nay việc thiết lập một bản đồ địa lý cho một vùng luôn luôn được sự quan tâm lớn đối với con người. Nhắc tới bản đồ ta thường hình dung tới nó chỉ phục vụ cho các nhà thám hiểm các nhà địa lý, khảo cổ. Nhưng không hẳn vậy một bản đồ được xây dựng giúp cho nhà nước, cho tất cả các nghiên cứu khoa học, các thương nhân…Mỗi người dùng đều có mục đích riêng của mình.
  • Ngày nay với sự bùng nổ của Internet, có rất nhiều bản đồ số được xây dựng. Nó rất quan trọng cho con người và công việc. Nhu cầu con người ngày càng lớn, ai cũng cần đến bản đồ( bạn thử hình dung khi đầu tiên đến Hà Nội với kiến trúc như bây giờ nếu không có bản đồ trong tay thì sẽ như thế nào? ). Vì vậy ai, đơn vị, tổ chức nào? sẽ cung cấp cho chúng ta?
  • Google Map cung cấp cho chúng ta toàn bộ bản đồ của thế giới. Không những vậy, các API họ cung cấp giúp cho các nhà phát triển xây dựng nên các ứng dụng đáp ứng phần nào đó nhu cầu của con người. Giờ đây Google đã phát triển nên đến phiên bản gọi là :”Google Map API V3″.

Đọc thêm tại đây http://dev.vast.vn/tuananh/Web/C%C4%90077#chuong3

Semantic_Web

Java script


Một ví dụ nho nhỏ

js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Java script</title>
<style>
input[type=text]
{
	width:50px;
	text-align:center;
	border:thin solid gray;
	padding: 2px 5px 2px 5px;
	border-radius: 3px 3px 3px 3px;
}
#result
{
	width:60px;
	background:#33CC66;
	color: #FFFFFF;
	font-weight:bold;
}

</style>
<script>
	function show()
	{
  		var f = document.getElementById("f");
 		var s = document.getElementById("s");
		var r = document.getElementById("result");
		
		r.value =  new Number(f.value) + new Number(s.value);		
	}
</script>
</head>
<body>
<input type="text" id="f" onkeyup="show();"/>+<input type="text" id="s" onkeyup="show();"/>
<input type="text" id="result" readonly="true" />
</body>
</html>