HTML5 - Lưu trữ web
HTML5 giới thiệu hai cơ chế, tương tự như cookie phiên HTTP, để lưu trữ dữ liệu có cấu trúc ở phía máy khách và để khắc phục các nhược điểm sau.
Cookie được bao gồm trong mọi yêu cầu HTTP, do đó làm chậm ứng dụng web của bạn bằng cách truyền cùng một dữ liệu.
Cookie được bao gồm trong mọi yêu cầu HTTP, do đó gửi dữ liệu không được mã hóa qua internet.
Cookie được giới hạn trong khoảng 4 KB dữ liệu. Không đủ để lưu trữ dữ liệu cần thiết.
Hai kho là session storage và local storage và chúng sẽ được sử dụng để xử lý các tình huống khác nhau.
Các phiên bản mới nhất của hầu hết mọi trình duyệt đều hỗ trợ HTML5 Storage bao gồm cả Internet Explorer.
Lưu trữ phiên
Bộ lưu trữ phiên được thiết kế cho các tình huống trong đó người dùng đang thực hiện một giao dịch duy nhất, nhưng có thể thực hiện nhiều giao dịch trong các cửa sổ khác nhau cùng một lúc.
Thí dụ
Ví dụ: nếu người dùng mua vé máy bay ở hai cửa sổ khác nhau, sử dụng cùng một trang web. Nếu trang web sử dụng cookie để theo dõi người dùng đã mua vé nào, thì khi người dùng nhấp từ trang này sang trang khác trong cả hai cửa sổ, vé hiện đang được mua sẽ "rò rỉ" từ cửa sổ này sang cửa sổ khác, có khả năng khiến người dùng mua hai vé cho cùng một chuyến bay mà không thực sự để ý.
HTML5 giới thiệu thuộc tính sessionStorage sẽ được các trang web sử dụng để thêm dữ liệu vào bộ lưu trữ phiên và nó sẽ có thể truy cập vào bất kỳ trang nào từ cùng một trang web được mở trong cửa sổ đó, tức làsession và ngay sau khi bạn đóng cửa sổ, phiên sẽ bị mất.
Sau đây là đoạn mã sẽ đặt một biến phiên và truy cập vào biến đó:
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
if( sessionStorage.hits ) {
sessionStorage.hits = Number(sessionStorage.hits) +1;
} else {
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Lưu trữ cục bộ
Các Local Storage được thiết kế để lưu trữ mà nhịp nhiều cửa sổ, và kéo dài hơn phiên hiện tại. Cụ thể, các ứng dụng Web có thể muốn lưu trữ megabyte dữ liệu người dùng, chẳng hạn như toàn bộ tài liệu do người dùng tạo hoặc hộp thư của người dùng, ở phía máy khách vì lý do hiệu suất.
Một lần nữa, cookie không xử lý tốt trường hợp này, vì chúng được truyền theo mọi yêu cầu.
Thí dụ
HTML5 giới thiệu thuộc tính localStorage sẽ được sử dụng để truy cập vùng lưu trữ cục bộ của trang mà không có giới hạn thời gian và vùng lưu trữ cục bộ này sẽ khả dụng bất cứ khi nào bạn sử dụng trang đó.
Sau đây là đoạn mã sẽ đặt một biến lưu trữ cục bộ và truy cập vào biến đó mỗi khi trang này được truy cập, kể cả lần sau, khi bạn mở cửa sổ -
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
if( localStorage.hits ) {
localStorage.hits = Number(localStorage.hits) +1;
} else {
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Xóa bộ nhớ web
Lưu trữ dữ liệu nhạy cảm trên máy cục bộ có thể nguy hiểm và có thể để lại lỗ hổng bảo mật.
Các dữ liệu lưu trữ phiên sẽ bị xóa bởi các trình duyệt ngay lập tức sau khi phiên giao dịch bị chấm dứt.
Để xóa cài đặt bộ nhớ cục bộ, bạn cần gọi localStorage.remove('key'); trong đó 'key' là khóa của giá trị bạn muốn xóa. Nếu bạn muốn xóa tất cả cài đặt, bạn cần gọilocalStorage.clear() phương pháp.
Sau đây là đoạn mã sẽ xóa hoàn toàn bộ nhớ cục bộ -
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
localStorage.clear();
// Reset number of hits.
if( localStorage.hits ) {
localStorage.hits = Number(localStorage.hits) +1;
} else {
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refreshing the page would not to increase hit counter.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau: