HTML5 Geolocation API cho bạn chia sẻ vị trí của bạn với các Website ưa thích. Một Javascript có thể nắm bắt được vĩ độ và kinh độ của bạn và có thể được gửi trở lại Webserver và thực hiện nhận biết vị trí như tìm kiếm các doanh nghiệp địa phương hoặc vị trí của bạn trên bản đồ.
Ngày nay hầu hết các trình duyệt và thiết bị Mobile hỗ trợ Geolocation API. Geolocation API làm việc với một thuộc tính mới của đối tượng điều hướng toàn cầu
* Local Storage là gì?
Với việc sử dụng local storage (hay còn gọi là lưu trữ cục bộ), ứng dụng web có thể lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng.
Trước đây thì lưu trữ trên cookie(giới hạn lưu trữ thấp)
* Các kiểu lưu trữ trong Local Storage
window.localStorage – Lưu trữ dữ liệu không giới hạn thời gian
window.sessionStorage – Chỉ lưu trữ dữ liệu trong một phiên làm việc (dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt)
Kiểm tra trình duyệt có hỗ trợ localStorage và sessionStorage hay không:
if(typeof(Storage) !== "undefined") {
// Có thể sử dụng localStorage/sessionStorage.
} else {
// Trình duyệt không hỗ trợ Local storage.
}
Các kiểu lưu trữ trong Local Storage
Local storage cung cấp 2 kiểu lưu trữ dữ liệu trên máy người dùng:
- window.localStorage – Lưu trữ dữ liệu không giới hạn thời gian
- window.sessionStorage – Chỉ lưu trữ dữ liệu trong một phiên làm việc (dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt)
Trước khi sử dụng local storage, bạn nên kiểm tra trình duyệt của người dùng có hỗ trợ localStorage và sessionStorage hay không:
if(typeof(Storage) !== "undefined") {
// Có thể sử dụng localStorage/sessionStorage.
} else {
// Trình duyệt không hỗ trợ Local storage.
}
* localStorage
localStorage được sử dụng để chứa những dữ liệu không giới hạn thời gian. Những dữ liệu này sẽ không bị xóa khi người dùng đóng cửa sổ trình duyệt.
if (typeof(Storage) !== "undefined") {
// Lưu trữ
localStorage.setItem("website", "dotnet.vn");
// Lấy dữ liệu
document.getElementById("result").innerHTML = localStorage.getItem("website");
} else {
document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ local storage...";
}
Giải thích:
Tạo một localStorage với tên là “website" và giá trị là “dotnet.vn"
Lấy giá trị của localStorage có tên là “website" và chèn vào thẻ có id="result"
Ví dụ bên trên có thể được viết theo cách khác như sau:
// Lưu trữ
localStorage.website = "webvn.com";
// Lấy dữ liệu
document.getElementById("result").innerHTML = localStorage.website;
Cú pháp để xóa “website" trong localStorage như sau:
localStorage.removeItem("website");
Lưu ý: Cả tên và giá trị đều được lưu dưới dạng chuỗi ký tự. Bạn nhớ chuyển đổi chúng nếu muốn sử dụng sử dụng ở định dạng khác (ví dụ kiểu số).
Ví dụ dưới đây dùng để đếm số lần mà người dùng đã nhấn vào nút. Lúc này, giá trị lưu trữ cần phải được chuyển đổi sang kiểu số trước khi sử dụng:
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấn vào nút trên " + localStorage.clickcount + " lần.";
} else {
document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ Local Storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Nhấn vào đây!</button></p>
<div id="result"></div>
<p>Nhấn vào nút bên trên để thấy cách ví dụ hoạt động.</p>
<p>Đóng cửa sổ trình duyệt và thử lại. Bạn sẽ thấy số lần nhấp vào nút sẽ được tiếp tục tăng thay vì đếm lại từ đầu.</p>
</body>
</html>
* sessionStorage
sessionStorage hoạt động giống như localStorage ngoại trừ việc nó chỉ lưu trữ dữ liệu trên một phiên làm việc. Dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt.
Ví dụ dưới đây cũng sử dụng để đếm số lần người dùng đã nhấn vào nút, nhưng kết quả chỉ được lưu trong phiên làm việc hiện tại:
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấn vào nút trên " + sessionStorage.clickcount + " lần trong phiên làm việc này.";
} else {
document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ Local Storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Nhấn vào đây!</button></p>
<div id="result"></div>
<p>Nhấn vào nút bên trên để thấy cách ví dụ hoạt động.</p>
<p>Đóng cửa sổ trình duyệt và thử lại. Bạn sẽ thấy kết quả trong phiên làm việc trước sẽ bị xóa đi.</p>
</body>
</html>
-------------------------
Geolocation and APIs: Định vị địa lý người dùng
Việc xác định vị trí người dùng là thỏa hiệp giữa 2 bên, do đó nếu người dùng không chấp thuận cho biết vị trí của mình thì ta không thể biết được.
HTML5 – Cách dùng Geolocation
* Dùng hàm getCurrentPosition() để lấy vị trí người dùng.
Ví dụ: Định vị đơn giản trả về các vĩ độ và kinh độ của vị trí của người sử dụng:
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Giải thích ví dụ :
• Kiểm tra xem có hỗ trợ định vị hay không
• Nếu có hỗ trợ, chạy hàm getCurrentPosition() . Nếu không, hiển thị thông báo
• Nếu hàm getCurrentPosition() thực thi thành công, trả về tọa độ cho hàm showPosition()
• Hàm showPosition() hiển thị ra kinh độ và vĩ độ
Ví dụ trên là một đoạn xử lý rất cơ bản, không có bắt lỗi.
* Xử lý lỗi hoặc khi người dùng từ chối tiết lộ thông tin vị trí
getCurrentPosition() được dùng để xử lý lỗi. Nó quy định hàm nào sẽ chạy nếu có lỗi.
Ví dụ
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
Mã lỗi:
Permission denied – Người dùng không chấp thuận chia sẻ vị trí
Position unavailable – Không lấy được tọa độ
Timeout – Hết thời gian thực thi
* Hiển thị kết quả trên bản đồ
Để hiển thị kết quả ra bản đồ, bạn cần truy cập vào dịch vụ bản đồ như dịch vụ Google Maps để sử dụng kinh độ và vĩ độ.
Ví dụ
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
Trong ví dụ trên chúng ta sử dụng kinh độ, vĩ độ trả về để hiển thị ra vị trí trên bản đồ.
Phương thức getCurrentPosition() – Kết quả trả về
Ta có thể lấy kết quả trả về bằng các cách trong bảng dưới đây
coords.latitude: Vĩ độ số thập phân
coords.longitude: Kinh độ số thập phân
coords.accuracy: Độ chính xác của vị trí
coords.altitude: Độ cao so với mực nước biển
coords.altitudeAccuracy: Độ chính xác của độ cao
coords.heading: Tọa độ theo kim đồng hồ phía Bắc
coords.speed: Tốc độ m/s
timestamp: Thời gian lúc trả về kết quả
Một số phương thức khác đáng quan tâm
watchPosition(): Theo dõi vị trí, trả về vị trí người dùng và cập nhật khi người dùng di chuyển (như GPS trong xe hơi).
clearWatch(): Dừng phương thức watchPosition().
Ví dụ sau dùng phương thức watchPosition()
Bạn cần một thiết bị kiểm tra cho kết quả tọa độ chính xác (như iPhone):
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
-----
Drag & Drop
* Về Drag
<script>
function drag_image(event)
{
event.dataTransfer.setData(“image", event.target.id);
}
</script>
<div id="div" style="border: red 2px solid; height:125px;
width:75px; padding: 10px">
<img src="image.jpg" height="75" width="75" id="image1"
draggable="true"/>
</div>
Các bước yêu cầu:
1. Thiết lập thuộc tính draggable để kéo
2. Thiết lập sự kiện ondragstart để thực hienẹ việc kéo
3. Lưu trữ dữ liệu bên trong đối tượng DataTransfer
* Về Drop
<script>
function drag_image(event)
{
event.dataTransfer.setData(“image", event.target.id);
}
function allow_drop(event)
{
event.preventDefault();
}
function drop_image(event)
{
var data=event.dataTransfer.getData(“image");
event.target.appendChild(document.getElementById(data));
}
</script>
<div id="div1" style="border: blue 2px solid; height:125px;
width:75px; padding: 10px">
<img src="image.jpg" height="75" width="75" id="image1"
draggable="true" ondragstart="drag_image(event)"/>
</div>
<br/>
<div id="div2" style="border: red 2px solid; height:125px;
width:75px; padding: 10px" ondrop="drop_image(event)"
ondragover="allow_drop(event)">
</div>