Lưu dữ liệu dưới client bằng LocalStorage

Api LocalStorage cho phép web dev lưu dữ liệu dưới dạng key-value trên máy của user. Việc lưu dữ liệu như vậy sẽ giúp cải thiện performance khi mà số lượng request database phía server được giảm đi, từ đó giảm chi phí hạ tầng server.

Trước khi có sự ra đời của LocalStorage, các dev khi muốn lưu dữ liệu trên client thường cần đến cookies của trình duyệt. Cách làm này có một số nhược điểm, cụ thể như cookie chỉ có thể lưu tối đa 4,096 bytes dữ liệu và cookie luôn được gửi đến server khi client gửi request dẫn đến tăng kích thước của request, lượng băng thông sử dụng cao, thời gian request lâu hơn.

Trong bài viết này, chúng ta sẽ cũng tìm hiểu về việc ứng dụng LocalStorage trong việc lưu dữ liệu của web app.

1. Kiểm tra xem trình duyệt có hỗ trợ LocalStorage hay không

Việc đầu tiên là kiểm tra xem liệu trình duyệt web mục tiêu có hỗ trợ LocalStorage hay không, nếu không, ta cần cung cấp fallbacks. Đoạn code bên dưới giúp chúng ta xác định điều này

if (localStorage) {
  // LocalStorage is supported
} else {
  // No support. Fallback here!
}

Trường hợp trình duyệt không hỗ trợ LocalStorage bạn có thể lưu dữ liệu bằng cookie hoặc gửi dữ liệu đó lên server và lưu tại server.

2. Lưu dữ liệu vào datastore

Để lưu dữ liệu, ta dùng hàm setItem() với 2 parameter key và value.

localStorage.setItem ('name', 'Bepatient');

Bây giờ chúng ta thử dùng localStorage để lưu thông tin mà người dùng nhập vào form trong ví dụ dưới đây.

<h2 id="welcomeMessage"></h2>
<form id="contactForm" action="contact.php" method="POST">
  <div class="field">
    <label for="name">Name</label>
    <input type="text" name="name" id="name">
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input type="email" name="email" id="email">
  </div>
  <div class="field">
    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>
  </div>
  <div class="field">
    <input type="submit" value="send">
  </div>
</form>

Chúng ta có thể listent event form submit và lưu tên người dùng vào datastore.

window.onload = function() {
	if (localStorage) {
	  document.getElementById('contactForm').addEventListener('submit', function() {
	      var name = document.getElementById('name').value;
	      localStorage.setItem('name', name);
	  });
	}
}

3. Lấy dữ liệu ra từ datastore

Để lấy dữ liệu ta dùng hàm getItem() với parameter duy nhất là key dùng khi lưu dữ liệu đó.

var name = localStorage.getItem('name');

Ví dụ dưới đây lấy tên user từ datastore và hiển thị lên webpage.

window.onload = function() {
  ...
  // Retrieve user name
  var name = localStorage.getItem('name');
  if (name != "undefined" && name != "null") {
    document.getElementById('welcomeMessage').innerHTML = "Hello " + name + "!";
  } else {
    document.getElementById('welcomeMessage').innerHTML = "Hello!";
  }  
}

4. Xóa dữ liệu khỏi datastore

Để xóa dữ liệu ta dùng hàm removeItem() với parameter duy nhất là key dùng khi lưu dữ liệu đó.

localStorage.removeItem('name');

Để xóa toàn bộ dữ liệu đã lưu ta dùng hàm clear()

localStorage.clear();

5. Lấy ra key

Để lấy ra key của dữ liệu trong datastore ta dùng hàm key() với parameter là index của dữ liệu đó trong datastore. Ví dụ sau in ra toàn bộ key, value của item được lưu trong datastore:

var i = 0;
for (i; i <= localStorage.length; i++) {
  console.log(localStorage.key(i) + " : " + localStorage.getItem(localStorage.key(i)));
};

6. Sandboxing và giới hạn của storage

Dữ liệu được lưu trong localStorage được sandbox theo domain name của ứng dụng web. Do đó, ứng dụng web A không thể truy xuất dữ liệu trong datastore của ứng dụng web B và ngược lại. Đây là một tính năng bảo mật quan trọng. Ngay cả sub-domain cũng được coi như một domain name riêng rẽ và tương ứng với nó cũng là một datastore riêng rẽ.

Limit của LocalStorage là khác nhau giữa các trình duyệt khác nhau. Để an toàn nhất, ta có thể giả định mỗi webapp có khoảng 2.5 MB bộ nhớ. Vì LocalStorage chỉ dùng lưu data dưới dạng cặp key-value, nên với kích thước bộ nhớ như vậy là quá đủ với một web app thông thường.

7. SessionStorage

Dữ liệu lưu bằng LocalStorage sẽ luôn tồn tại trên trình duyệt và có thể lấy ra trong tương lai. Trường hợp, dữ liệu chỉ cần lưu trong khoảng thời gian session làm việc của user thì ta có thể lưu nó bằng interface sessionStorage. sessionStorage có đầy đủ đặc điểm của localStorage ngoại trừ việc dữ liệu lưu bằng sessionStorage sẽ tự động bị xóa đi khi user đóng tab của web.

// Storing data
sessionStorage.setItem('name', 'Bepatient');

// Retrieving data
sessionStorage.getItem('name');

// Deleting data
sessionStorage.removeItem('name');

// Retrieving item key
sessionStorage.key(index);

// Clearing the datastore
sessionStorage.clear();

8. Kết luận

Có thể thấy LocalStorage đặc biệt hữu dụng khi cung cấp datastore để lưu trữ dữ liệu ở client. Hi vọng thông qua bài viết các bạn đã có cái nhìn sơ lược về việc sử dụng LocalStorage và có ứng dụng vào trong công việc phát triển web app của mình.

Tham khảo Storing Data on The Client with LocalStorage http://blog.teamtreehouse.com/storing-data-on-the-client-with-localstorage