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 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 cơ chế lưu trữ là lưu trữ phiên và lưu trữ cục bộ và chúng sẽ được sử dụng để xử lý các tình huống khác nhau.
Lưu trữ phiên
Bộ nhớ 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 đơn lẻ 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.
Bạn có thể thử chạy phần sau để đặt một biến phiên và truy cập vào biến đó
Ví dụ
<!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> Bộ nhớ cục bộ
Local Storage được thiết kế để lưu trữ trên nhiều cửa sổ và kéo dài ngoài 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.
Bạn có thể thử chạy đoạn mã sau để đặt biến lưu trữ cục bộ và truy cập biến đó mỗi khi truy cập trang này, kể cả lần sau khi bạn mở cửa sổ.
Ví dụ
<!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>