Web Storage (Kho lưu Web) trong HTML5

HTML5 giới thiệu hai kỹ thuật, tương tự như HTTP Cookie, để lưu giữ dữ liệu được cấu trúc trên Client-Side và để khắc phục những nhược điểm sau:

Các Cookie được bao gồm với mỗi Yêu cầu HTTP (HTTP request), do đó làm chậm trình duyệt web của bạn bằng việc truyền tải dữ liệu giống nhau.
Các Cookie được bao gồm với mỗi Yêu cầu HTTP (HTTP request), do đó gửi dữ liệu không được mật mã hóa qua Internet (không có tính bảo mật).
Các Cookie bị giới hạn khoảng 4 KB dữ liệu. Không đủ để lưu giữ dữ liệu cần thiết.

Có hai nơi lưu giữ là session storage và local storage và chúng sẽ được sử dụng để giải quyết các tình huống khác nhau.

Các phiên bản mới nhất của trình duyệt hỗ trợ HTML5 Storage bao gồm IE.

Session Storage

Session Storage lưu giữ dữ liệu cho phiên làm việc duy nhất, nhưng có thể thực hiện nhiều công việc trong các cửa sổ khác nhau tại cùng một thời điểm.

Ví dụ

Ví dụ, nếu một người sử dụng mua vé máy bay trong hai cửa sổ khác nhau, sử dụng cùng một site. Nếu site sử dụng các Cookie để theo dõi các vé nào người sử dụng đang mua, thì khi đó, người sử dụng click từ trang này sang trang khác trong cả hai cửa sổ, vé hiện tại đang được mua sẽ "leak – rò rỉ" từ một cửa sổ sang cửa sổ khác, có thể là nguyên nhân người sử dụng mua hai vé cho cùng một chuyến bay mà không thực sự chú ý.

HTML5 giới thiệu thuộc tính sessionStorage mà sẽ được sử dụng bởi các site để thêm dữ liệu tới Session Storage, và nó sẽ có thể truy cập tới bất kỳ trang nào từ cùng một site dược mở trong phiên cửa sổ đó và ngay sau khi bạn đóng cửa sổ, phiên sẽ bị thất lạc.

Sau đây là code mà sẽ thiết lập một biến session và truy cập biến đó:

<!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>

Nó sẽ cho kết quả sau:

Quảng cáo

Local Storage

Local Storage được thiết kế để lưu giữ dữ liệu không thời hạn. Dữ liệu vẫn còn được lưu trữ khi đóng trang web hoặc trình duyệt, tùy thuộc vào giá trị thiết lập dung lượng lưu trữ cho trình duyệt của người dùng.

Một lần nữa, các Cookie không xử lý tình huốn này tốt, bởi vì chúng được truyền tải với mỗi request.

Ví dụ

HTML5 giới thiệu thuộc tính localStorage mà sẽ được sử dụng để truy cập một khu vực lưu giữ nội bộ của trang mà không giới hạn thời gian và nơi lưu giữ nội bộ này sẽ có sẵn bất cứ khi nào bạn sử dụng trang đó.

Sau đây là code mà sẽ thiết lập một biến local storage và truy cập biến đó mỗi khi trang này được truy cập, ngay cả khi bạn mở cửa sổ:

<!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>

Nó sẽ cho kết quả sau:

Xóa Web Storage

Lưu giữ dữ liệu nhạy trên thiết bị nội bộ có thể là nguy hiểm và có thể để lại một lỗ hổng bảo mật.

Dữ liệu Session Storage sẽ được xóa bởi các trình duyệt ngay lập tức sau khi phiên kết thúc.

Để xóa một Local Storage bạn sẽ cần gọi localStorage.remove('key'); ở đây "key" là khóa của giá trị bạn muốn gỡ bỏ. Nếu bạn muốn xóa tất cả các thiết lập, bạn cần gọi phương thức: localStorage.clear().

Sau đây là code mà sẽ xóa toàn bộ nơi Local Storage:

<!DOCTYPE HTML>
<html>

   <body>

      <script type="text/javascript">
		
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ){
            localStorage.hits = Number(localStorage.hits) +1;
         }else{
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
	
</html>

Nó sẽ cho kết quả sau:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML5 phổ biến khác tại vietjack.com: