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ác trạng thái của web tại client với stdioFlashStorage (JavaScript), rất hữu ích cho việc thiết kế và lưu trạng thái của các giá trị ở nhiều lần xử lý sự kiện khác nhau của JavaScript tại web-client.

Giới thiệu

Đặt giả thiết chúng ta cần lưu trữ giá trị khởi tạo như vị trí của một thẻ (tag) trong html vì nó có thể thay đổi vị trí trong quá trình di chuyển khung nhìn (thanh trượt), ta có nhiều cách để làm, đó là lưu trữ vào Local Storage (HTML5) hay lưu trong 1 thẻ (tag) khác.

Giải pháp nào cũng tốt, với HTML5 ta có Local Storage, tuy nhiên, nếu ta dùng HTML4 hoặc cần một giải pháp bền vững nhất hiện thời, ta nên sử dụng phương pháp lưu vào một tag input với type là hidden <input type="hidden" value="www_stdio_vn"/>.

stdioFlashStorage.js (stdioFlashStorage-1.0.0.js) được hiện thực bằng phương pháp lưu trữ vào thẻ input kiểu hidden này. Và tôi cung cấp lại cho các bạn một giải pháp vừa đủ để sử dụng.

Lưu ý rằng, khác với Local Storage, có thể lưu dữ liệu của bạn tại web-client "mãi mãi", thì stdioFlashStorage chỉ lưu lại trong một lần load trang, nếu bạn gửi lại yêu cầu load trang lên server, thì dữ liệu này sẽ mất.

Tiền đề bài viết

Bài viết được thực hiện bởi yêu cầu chia sẻ từ các tác giả khác, và từ việc ứng dụng nó vào hệ thống Stdio. Nhận thấy nó cũng là nhu cầu chung, nên tôi quyết định chia sẻ cách hiện thực này.

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

Dành cho các web-developer đang tìm một giải pháp lưu trữ tại web-client, có hữu ích cho việc lưu trữ các bước làm việc của người sử dụng (ví dụ như lưu trữ câu hỏi hiện tại mà người sử dụng đã trả lời trong một danh sách câu hỏi).

Download phiên bản hiện tại

MỚI NHẤT stdioFlashStorage-1.0.0.js

Các công cụ và môi trường

Được sử dụng kèm với jquery (trong bài viết này tôi sử dụng jquery-2.1.3.min.js) nhằm truy cập vào các tag cho nhanh chóng, stdioFlashStorage.js (xem và download phiên bản mới nhất tại mục Download phiên bản hiện tại).

Download demo hoàn chỉnh ở cuối bài, bạn nên download trước để dễ theo dõi.

Trình duyệt tương thích: Firefox 36+-, Chrome 40+-, Internet Explorer 9+-, Safari 11+-.

Hướng dẫn sử dụng

Khái niệm profile

Trong ngữ cảnh của stdioFlashStorage, tôi gọi một giá trị lưu trữ là profile, profile có 2 thành phần bao gồm keyvalue.

Sử dụng key để truy cập và định danh tìm kiếm cho profile, giá trị ta cần lưu chính là value. Key do bạn tự đặt, như cách đặt tên một biến trong lập trình.

Ví dụ về thao tác trên profile

Ví dụ 1

Giả sử tôi cần lưu giá trị là đường dẫn đến trang web chứa game Zero, tôi sẽ đặt tên keygame_site, và valuehttp://play.stdio.vn/games/play/zero.

Khi lưu, tôi cần keyvalue để lưu và khi cần lấy dữ liệu, tôi sẽ dựa vào key game_site để lấy.

Ví dụ 2

Giả sử tôi cần lưu giá trị là đường dẫn đến trang web chứa dữ liệu là trang cá nhân của tác giả Rye, tôi sẽ đặt tên keyauthor_site, và value là http://www.stdio.vn/users/index/175/nguyen-phan.

Lưu ý: value có thể là bất kỳ chuỗi nào, không hẳn phải là URL, nó có thể lưu dữ liệu như số điện thoại.

Cài đặt

  • Download stdioFlashStorage-x.x.x.js (x.x.x là tùy vào phiên bản mới nhất mà bạn download từ bài viết này).
  • Lưu trữ lên web-server
  • Load vào sau jquery trong trang html/web của bạn trong phần header, bạn hãy sửa đường dẫn đến các file này cho phù hợp
<html>
	<head>
		<script type="text/javascript" src="/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="/stdioFlashStorage-1.0.0.js"></script>
	</head>
	<body>
		...
	</body>
</html>

Các hàm cơ bản

Lưu trữ dữ liệu

SPP_SetProfile(_key, _value);

Ví dụ lưu trữ value giá trị Kevin La với keyAuthorName, value với giá trị www.stdio.vn với keyWebsitelà, dòng code thứ 8, 9

<html>
	<head>
		<script type="text/javascript" src="/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="/stdioFlashStorage-1.0.0.js"></script>
	</head>
	<body>
		<script>
			SPP_SetProfile("AuthorName", "Kevin La");
			SPP_SetProfile("Website", "www.stdio.vn");
		</script>
	</body>
</html>

Lấy dữ liệu đã lưu trữ

SPP_GetProfile(_key);

Ví dụ ta đã lưu trữ 1 profile với key là AuthorFacebook với valuehttps://www.facebook.com/kevin.la.771, ta sẽ lấy dữ liệu này thông qua key AuthorFacebook, dòng code thứ 11, sẽ trả về value của profile được lấy.

<html>
	<head>
		<script type="text/javascript" src="/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="/stdioFlashStorage-1.0.0.js"></script>
	</head>
	<body>
		<script>
			SPP_SetProfile("AuthorFacebook", "https://www.facebook.com/kevin.la.771");
			
			// Lay Profile
			console.log(SPP_GetProfile("AuthorFacebook")[1]);
		</script>
	</body>
</html>

Lấy toàn bộ dữ liệu đã lưu trữ

SPP_GetProfiles();

Lấy toàn bộ profile đã lưu trữ vào một mảng, nếu chưa có profile nào được lưu, sẽ trả về giá trị null.

var profile_list = SPP_GetProfiles();

Xóa một dữ liệu đã lưu trữ

SPP_RemoveProfile(_key);

Xóa bỏ một profile đã lưu trữ, với key được chỉ định, sau thao tác này, sẽ không tồn tại profile đó trong danh sách lưu trữ.

Download demo hoàn chỉnh

DOWNLOAD DEMO_STDIOFLASH_STORAGE.zip

THẢO LUẬN