Phần 8 - Web Storage trong HTML5
HTML5 Web Storage là gì?
Trong HTML5 các trang
web có thể lưu trữ dữ liệu cục bộ trong các trình duyệt của người dùng.
Để lưu trữ dữ liệu cục
bộ thông thường ta dùng cookies. Tuy nhiên HTML5 cho phép bạn sử dụng hình thức
Web Storage để lưu trữ dữ liệu an toàn hơn và tốc độ truy xuất cũng nhanh hơn.
Dữ liệu mặc dù không được tích hợp với mỗi yêu cầu từ server nhưng nó được sử
dụng chỉ khi có yêu cầu, điều này sẽ không làm giảm hiệu năng của máy tính. Web
Storage cũng có thể lưu trữ một lượng lớn dữ liệu mà không ảnh hưởng tới hiệu
năng của website.
Các dữ liệu được lưu trữ
trong cặp key/value và một trang web chỉ có thể truy cập dữ liệu được lưu trữ
của chính nó.
Trình duyệt hỗ trợ
Các trình duyệt sau đây
có hỗ trợ Web Storage: Internet Explorer 8+, Firefox, Opera, Chrome và Safari.
localStorage và sessionStorage
Có hai đối tượng dùng để
lưu trữ dữ liệu đối với các trang web cục bộ:
Ø localStorage – lưu trữ
dữ liệu mãi mãi
Ø sessionStorage – lưu trữ
dữ liệu cho mỗi phiên làm việc
Lưu ý rằng trước khi sử
dụng Web Storage bạn nên kiểm tra xem trình duyệt có hỗ trợ localStorage và
sessionStorage hay không bằng cú pháp bên dưới:
if(typeof(Storage)!="undefined")
{
alert("Trình duyệt này có hỗ trợ localStorage và sessionStorage");
// Code.....
}
else
{
alert("Trình duyệt không hỗ trợ web storage!");
}
{
alert("Trình duyệt này có hỗ trợ localStorage và sessionStorage");
// Code.....
}
else
{
alert("Trình duyệt không hỗ trợ web storage!");
}
Đối tượng localStorage
Đối tượng này cho phép
lưu trữ dữ liệu vĩnh viễn. Dữ liệu sẽ không bị xóa ngay cả khi đóng trình
duyệt.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
}
else
{
document.getElementById("result").innerHTML="Trình duyệt này không hỗ trợ web storage!";
}
</script>
</body>
</html>
Giải thích ví dụ:
Ø localStorage được dùng
để tạo cặp key/value với key="lastname" và value="Smith"
Ø Câu lệnh phía sau sẽ
truy xuất vào key "lastname" để lấy value tương ứng và chèn vào phần
tử có id="result".
Lưu ý: Cặp key/value luôn luôn lưu trữ dưới dạng chuỗi, vì vậy bạn cần nhớ
chuyển sang định dạng khác khi cần.
Ví dụ sau đây sẽ đếm số
lần người dùng kích chuột vào nút lệnh. Trong ví dụ này chuỗi ký số được chuyển
thành số thông qua hàm Number() để có thể tăng biến đếm.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 đã
click vào nút lệnh " + localStorage.clickcount + " lần.";
}
else
{
document.getElementById("result").innerHTML="Trình
duyệt này không hỗ trợ web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()"
type="button">Click me!</button></p>
<div id="result"></div>
<p>Hãy click vào nút lệnh, bạn sẽ thấy hiệu ứng.</p>
<p>Nếu bạn đóng trình duyệt thì bộ đếm giá trị sẽ lưu lại
giá trị hiện tại, và khi bạn chạy lại chương trình cũng trên trình duyệt này
thì bộ đếm vẫn sẽ tiếp tục làm việc với giá trị đã lưu trữ. Bạn hãy thử xem
sao.</p>
</body>
</html>
Đối tượng sessionStorage
Đối tượng sessionStorage
có ý nghĩa tương tự với đối tượng localStorage, chỉ khác một điểm là nó chỉ lưu
trữ dữ liệu trong một phiên, nghĩa là dữ liệu sẽ bị xóa khi người dùng đóng cửa
sổ trình duyệt.
Ví dụ sau đây sẽ đếm số
lần người dùng click vào nút lệnh trong phiên hiện thời của trình duyệt.
Ví dụ:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<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 đã click vào nút lệnh button " + sessionStorage.clickcount + " lần trong phiên hiện thời.";
}
else
{
document.getElementById("result").innerHTML="Trình duyệt này không hỗ trợ web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Hãy click vào nút lệnh, bạn sẽ thấy hiệu ứng.</p>
<p>Nếu bạn đóng trình duyệt thì bộ đếm sẽ hủy giá trị đếm được. Bạn hãy thử xem sao.</p>
</body>
</html>
No comments :
Post a Comment