Nội dung bài viết
La Kien Vinh Để lưu trữ được thông tin của người dùng tại trình duyệt web của họ trước thời của HTML5, chúng ta sẽ sử dụng cookies để làm điều này, tuy nhiên cookies có vài điểm hạn chế cho một số trường hợp đặc biệt. HTML5 đã thiết kế 1 cách lưu trữ khác gọi là localStorage. Trong bài viết này ta sẽ tìm hiểu về localStorage trong HTML5, cách sử dụng nó và sử dụng sao cho hiệu quả.

Giới thiệu

Để lưu trữ thông tin của người dùng tại trình duyệt web, ta có thể sử dụng cookies để hiện thực, tuy nhiên cookies (dung lượng tối đa 4KB) có vài điểm hạn chế như dữ liệu phải gửi qua lại giữa server và client (cho dù dữ liệu đó chỉ sử dụng ở client - lưu điểm cho 1 game nhỏ).

Để chủ động hơn, HTML5 đã hiện thực một khái niệm mới là localStorage nhằm giúp ta lưu trữ và sử dụng nó linh hoạt tại client, dung lượng của localStorage vào khoảng 2MB đến 10MB. localStorage không nhất thiết phải trung chuyển qua lại giữa client và server. Muốn gửi thông tin này đến server ta có thể chủ động thông qua http request.

Tiền đề bài viết

Sau bài viết Lưu Trữ Trạng Thái Web Tại Client Với stdioFlashStorage Trong 1 Lần Request Trang, tôi muốn chia sẻ thêm 1 cơ chế mà HTML5 hỗ trợ sẵn để lưu trữ thông tin tại client.

Đối tượng hướng đến

Dành cho các nhà phát triển web, có kinh nghiệm với HTML4+ để có thể so sánh được nhiều hơn về khái niệm mới này.

localStorage là gì?

localStorage là cách thức lưu trữ dữ liệu tại client độc lập với server. Ta giả định viết 1 ứng dụng web cho phép người dùng viết bài trên STDIO, để tránh người dùng chưa lưu trữ bài viết nhưng lại gặp sự cố về máy tính, ứng dụng của ta sẽ tiến hành lưu trữ mỗi 5 phút 1 lần, khi người dùng nhấn vào nút lưu trữ thì toàn bộ bài viết sẽ được lưu trữ vào server.

Để hiện thực tính năng lưu trữ tạm này, ta có thể yêu cầu mỗi 5 phút dữ liệu tự lưu trữ lên server (thông qua cookies hoặc lưu vào cơ sở dữ liệu), nhưng ta có thể nghĩ đến việc chỉ lưu trữ tạm ở client. Và localStorage sẽ giúp ta làm được điều này.

Nếu làm như vậy, server sẽ giảm được lượng request đáng kể nhưng vẫn mang được trải nghiệm tốt cho người dùng. Ngoài ra, thời gian lưu trữ của localStorage có thể kéo dài cho đến khi ta ra lệnh xóa.

Cách sử dụng localStorage

Kiểm tra trình duyệt có hỗ trợ localStorage hay không?

Để sử dụng localStorage, ta dùng JavaScript. Tại thời điểm này, các trình duyệt web hiện đại đã hỗ trợ tốt cho HTML5 và ta mặc định là nó đã có, tuy nhiên ta vẫn nên kiểm tra xem localStorage có được hỗ trợ trong trình duyệt web của người sử dụng không vì có thể vẫn còn nhiều người còn sử dụng các trình duyệt web cũ.

<!DOCTYPE html>
<html>
	<body>
		<script>
			if (localStorage)
			{
				alert("STDIO: Yes, localStorage is here!");
			}
			else
			{
				alert("STDIO: Your browser does not support localStorage!");
			}
		</script>
	</body>
</html>

Nếu trình duyệt không hỗ trợ localStorage, thì thông báo sau sẽ hiện lên

ss_1

Nếu trình duyệt có hỗ trợ thì thông báo sau sẽ hiện lên

ss_2

Lưu mới, thay đổi hoặc lấy dữ liệu từ localStorage

Để lưu trữ hoặc lấy dữ liệu từ localStorage ta chỉ cần một cú pháp đơn giản như sau với JavaScript

Lưu, thay đổi dữ liệu

localStorage.setItem(name, data)

Kiểm tra dữ liệu đã tồn tại hay chưa

localStorage.getItem(name) == null

Xóa dữ liệu

localStorage.removeItem(name)

Ví dụ

<!DOCTYPE html>
<html>
	<body>
		<script>
			if (localStorage)
			{
				// Save data to localStorage
				localStorage.setItem("STDIO", "www.stdio.vn");
				localStorage.setItem("STDIO_TRAINING", "training.stdio.vn");
 
				// Get data from localStorage
				console.log(localStorage.getItem("STDIO_TRAINING"));
				
				// Check if data stored in localStorage
				if (localStorage.getItem("Phone") == null)
				{
					console.log("Phone? Where is Phone?");
				}
				
				// Remove data from localStorage
				localStorage.removeItem("STDIO_TRAINING");
 
				if (localStorage.getItem("STDIO_TRAINING") == null)
				{
					console.log("Where is STDIO_TRAINING?");
				}
			}
		</script>
	</body>
</html>

Kết quả

vi du localStorage

Chia sẻ

Do dữ liệu được lưu tại trình duyệt web của người dùng cuối, do đó ta cần cẩn thận việc dữ liệu thay đổi có gây nguy hại cho hệ thống hoặc chính người sử dụng đó hay không?

Theo kinh nghiệm cá nhân, chúng ta chỉ nên lưu trữ các giá trị liên quan đến xử lý giao diện người dùng bằng phương pháp này như họ đã chọn theme nào, hoặc những game nhỏ cần lưu điểm số, không gây ảnh hưởng đến hệ thống lớn nhất là các vấn đề về uy tín và thanh toán.

THẢO LUẬN
ĐÓNG