Thứ Tư, 25 tháng 12, 2013
HTML5 Web lưu trữ
HTML5 lưu trữ web, một lưu trữ địa phương tốt hơn so với các tập tin cookie.
HTML5 Web lưu trữ là gì?
Với HTML5, các trang web có thể lưu trữ dữ liệu tại địa phương trong trình duyệt của người dùng.
Trước đó, điều này đã được thực hiện với các tập tin cookie. Tuy nhiên, lưu trữ web an toàn hơn và nhanh hơn. Dữ liệu không bao gồm tất cả các yêu cầu máy chủ, nhưng sử dụng chỉ khi được hỏi. Nó cũng có thể lưu trữ một lượng lớn dữ liệu, mà không ảnh hưởng hiệu suất của trang web.
Các dữ liệu được lưu trữ trong cặp khóa / giá trị, và một trang web chỉ có thể truy cập dữ liệu được lưu trữ của chính nó.
Hỗ trợ trình duyệt
Lưu trữ web được hỗ trợ trong Internet Explorer 8 +, Firefox, Opera, Chrome, và Safari.
Lưu ý: Internet Explorer 7 và các phiên bản trước đó, không hỗ trợ lưu trữ web.
localStorage và sessionStorage
Có hai đối tượng mới để lưu trữ dữ liệu trên máy khách:
- localStorage - lưu trữ dữ liệu không có ngày hết hạn
- sessionStorage - lưu trữ dữ liệu trong một phiên
Trước khi sử dụng lưu trữ web, kiểm tra trình duyệt hỗ trợ cho localStorage và sessionStorage:
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
Các đối tượng localStorage
Đối tượng localStorage lưu trữ dữ liệu không có ngày hết hạn. Các dữ liệu sẽ không bị xóa khi trình duyệt được đóng lại, và sẽ có mặt vào ngày hôm sau, tuần, hoặc năm.
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="Sorry, your browser does not support web storage...";
}
</script>
</body>
</html>
Thử nó cho mình »
Ví dụ giải thích:
- Tạo ra một cặp khóa localStorage / giá trị với key = "LastName" và giá trị = "Smith"
- Lấy giá trị của các "LastName" chìa khóa và chèn nó vào các phần tử với id = "kết quả"
Mẹo: cặp khóa / giá trị được lưu trữ dưới dạng chuỗi. Nhớ để chuyển đổi chúng sang định dạng khác khi cần thiết.
Ví dụ sau đây đếm số lần người dùng đã nhấp vào một nút. Trong mã này chuỗi giá trị được chuyển đổi thành số để có thể tăng truy cập:
Ví dụ
<!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="You have clicked the button " + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>
Thử nó cho mình »
Các đối tượng sessionStorage
Đối tượng sessionStorage bằng với đối tượng localStorage, ngoại trừ rằng nó lưu dữ liệu chỉ trong một phiên. Các dữ liệu bị xóa khi người dùng đóng cửa sổ trình duyệt.
Ví dụ sau đây đếm số lần người dùng đã nhấp vào một nút, trong phiên giao dịch hiện tại:
Ví dụ
<!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="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét