Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
Để 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ữ đượ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ả.

Ngoài ra, chúng ta sẽ còn cần các giải pháp dành cho nhiều lần load trang khác nhau, để làm được điều này, ta có thể dùng cookies hoặc lưu trữ trạng thái tại server và yêu cầu trạng thái bất kỳ khi nào ta muốn. Tuy nhiên, giải pháp này khá tốn kém chi phí vì cookie sẽ phải gửi lên server mỗi lần load trang và trả về cho client và việc lưu trữ trên server cũng tốn kém năng lực server dù muốn hay không cookies vẫn luôn gửi về cho server khi có yêu cầu load trang và dung lượng lưu trữ cho 1 cookie không quá lớn, khoảng 4KB.

Để 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 WebClient, dung lượng của localStorage vào khoảng 2MB đến 10MB. localStorage không liên kết với WebServer, do đó, thông tin này ta muốn gửi đến WebServer ta phải chủ động gửi thông qua post hoặc get.

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 chúng ta đã có 1 cơ chế, 1 giải pháp để lưu trữ các trạng thái ở lần load trang đó và có thể lấy được dữ liệu trong lần load đó.

Đố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.

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 sẽ sử dụng JavaScript để làm điều này vì nó là ngôn ngữ của WebClient. 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 xmlns="http://www.w3.org/1999/xhtml">
	<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 xmlns="http://www.w3.org/1999/xhtml">
	<body>
		<script>
			if (localStorage)
			{
				// Save data to localStorage
				localStorage.setItem("Name", "Kevin La");
				localStorage.setItem("Website", "www.stdio.vn");

				// Get data from localStorage
				console.log(localStorage.getItem("Name"));
				
				// Check if data stored in localStorage
				if (localStorage.getItem("Phone") == null)
				{
					console.log("The Phone was not saved");
				}
				
				// Remove data from localStorage
				localStorage.removeItem("Name");

				if (localStorage.getItem("Name") == null)
				{
					console.log("The Name was not saved");
				}
			}
		</script>
	</body>
</html>

Kết quả

ss_3

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? Tốt hơn hết là không nên lưu trữ tài khoản ngân hàng, tài khoản người sử dụng nếu dữ liệu không được mã hóa.

Theo kinh nghiệm cá nhân, chúng ta chỉ nên lưu trữ các vấn đề 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ỏ 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