HTML5 & CSS3 – Lưu trữ máy trạm

LINK DEMO

HTML5 Web Storage là gì?

Với HTML5, trang web có thể lưu dữ liệu ở local bằng trình duyệt web của người dùng.

Trước đây, việc lưu trữ local là việc của cookies. Tuy nhiên, Web Storage bảo mật và chạy nhanh hơn. Dữ liệu không gửi lên server nên do đó chỉ người dùng có thể truy cập được khi dùng. Nó có thể lưu một lượng dữ liệu lớn, mà không làm ảnh hưởng đến hiệu suất của website.

Dữ liệu được lưu thành một cặp khóa/giá trị, và trang web chỉ có thể truy xuất đến dữ liệu chính nó tạo ra nghĩa là trang nào chỉ thấy dữ liệu trang web đó.

Các trình duyệt có hỗ trợ Web Storage:

Web storage được hỗ trợ trên trình duyệt Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.

Lưu ý: Internet Explorer 7 và các phiên bản trước đó không hỗ trợ web storage.

localStorage và sessionStorage 

Là 2 đối tượng dùng cho lưu trữ máy trạm
• localStorage - stores data không thời hạn
• sessionStorage - stores data cho một session

Trước khi sử dụng web storage, kiếm tra xem trình duyệt có hỗ trợ 2 đối tượng localStorage và sessionStorage hay không:

if(typeof(Storage)!=="undefined") 
  { 
  // Yes! localStorage and sessionStorage support! 
  // Some code..... 
  } 
else 
  { 
  // Sorry! No web storage support.. 
  }  

Đối tượng localStorage

Là đối tượng lưu giữ dữ liệu không thời hạn. Dữ liệu sẽ không bị xóa đi khi tắt trình duyệt, và nó luôn luôn có sẵn khi ta cần truy xuất.

Ví dụ

localStorage.lastname="Smith"; 
document.getElementById("result").innerHTML="Last name: "+ localStorage.lastname; 

Giải thích ví dụ:

• Tạo ra một cặp khóa/giá trị (key/value) localStorage với key=”lastname” và value=”Smith”
• Truy xuất dữ liệu theo từ khóa “lastname” và chèn kết quả vào phần tử có id=”result”

Mách nhỏ: Cặp khóa (key/value) luôn được lưu kiểu chuỗi. Nhớ chuyển kiểu và định dạng lại khi cần dùng.

Ví dụ dưới đây đếm số lần click chuột vào nút button. Trong đoạn code sau có phần chuyển chuỗi thành số để cộng dồn vào kết quả.

Ví dụ

if (localStorage.clickcount) 
  { 
  localStorage.clickcount=Number(localStorage.clickcount)+1; 
  } 
else 
  { 
  localStorage.clickcount=1; 
  } 
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";  

Đối tượng sessionStorage 

Đối tượng sessionStorage cũng giống như đối tượng localStorage, chỉ khác ở chỗ dữ liệu được lưu chỉ trong 1 phiên làm việc và bị xóa đi khi ta tắt trình duyệt.

Ví dụ dưới đây đếm số lần click chuột vào nút button nhưng chỉ trong một phiên làm việc, nếu tắt trình duyệt giá trị set về 0 :

Ví dụ

if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

Theo khoapham.vn