Tài trợ bài viết này và giới thiệu dịch vụ, sản phẩm, thương hiệu, nhu cầu tuyển dụng của doanh nghiệp đến với cộng đồng.
La Kiến Vinh 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.
Nội dung bài viết

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 sessionStorage, localStorage (HTML5) hay lưu trong 1 thẻ (tag) khác.

Với HTML5 ta có sessionStorage, tuy nhiên, nếu ta dùng HTML4 hoặc cần một giải pháp bền vững hiện thời (tương lai gần có thể thay đổi thành sessionStorage khi mà các trình duyệt web đều hỗ trợ) 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.

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à value https://www.stdio.fun.

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ôi, tôi sẽ đặt tên keyauthor_site, và valuehttps://www.stdio.vn/users/la-kien-vinh-1.

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ị La Kien Vinh 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", "La Kien Vinh");
			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/lakienvinh.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/lakienvinh.88");
			
			// 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
ĐÓNG