LocalStorage và SessionStorage

Local Storage, Session Storage, indexedDB và Cookie trên trình duyệt

Local Storage, Session Storage, indexedDB và Cookie trên trình duyệt web là các công cụ dùng để lưu trữ, chúng có tác dụng riêng phục vụ các mục đích khác nhau

Trong kỹ thuật thiết kế các ứng dụng chạy trên nền website, hoặc website phức tạp. Các nhà lập trình viên cần phải sử dụng tối đa các chức năng của trình duyệt để tăng tốc website, tăng tính tiện ích … lưu tạm các dữ liệu không quan trọng … và tất cả các thủ thuật đó cần phải có sự hỗ trợ từ trình duyệt. Một phần mềm nhỏ hoặc một game flash trên trình duyệt đều sẽ sử dụng các phương pháp lưu trữ tạm thời như LocalStorage, IndexedDB…. Sau đây ta cùng tìm hiểu về từng chức năng lưu trữ này.

LocalStorage là gì ?

Tất cả các trình duyệt hiện đại đều hỗ trợ chức năng này. LocalStorage giúp website lưu trữ dữ liệu vĩnh viễn trên trình duyệt. Trừ khi người dùng xóa cache hoặc làm các hành động như cài lại trình duyệt.

LocalStorage tồn tại trên mọi session. Bạn có thể lấy chúng ra bằng mã Javascript. Cụ thể:

window.LocalStorage.setItem('name', 'value');

Để đọc lại giá trị, bạn gọi hàm:

window.LocalStorage.getItem('name');

Và để xóa chúng:

window.LocalStorage.clear(); hoặc xóa phần tử:
window.LocalStorage.removeItem('name');

Có rất nhiều giá trị trong một ứng dụng website nên lưu trong LocalStorage thay vì SessionStorage.

Tuy nhiên, bạn nên lưu ý là LocalStorage không bảo mật. Bạn có thể dễ dàng lưu dữ liệu, lấy dữ liệu và chỉnh sửa dữ liệu từ LocalStorage.

Ngoài ra, điểm yếu của LocalStorage là nó chỉ lưu đơn thuần một String. Các kiểu dữ liệu phức tạp đều không phù hợp để lưu trong LocalStorage.

SessionStorage là gì ?

Cũng giống như LocalStorage, nhưng SessionStorage chỉ lưu các giá trị trong một phiên làm việc. Hết phiên làm việc thì dữ liệu bị xóa trắng.

Trong một số trò chơi, hoặc trong một vài phiên đăng nhập chúng ta cần sử dụng tới chức năng này.

Ví dụ về các hàm:

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

Cookie

Đây là phương pháp lưu trữ phổ biến cho các phiên đăng nhập trên website thay vì SessionStorage hay các loại khác. Cookie khác tất thảy các cách lưu trữ trên đó là nó gửi kèm trong mọi request của trình duyệt tới Server. Vì thế các ngôn ngữ phía Server site có thể đọc và tương tác với Cookie.

Cookie được chỉnh sửa, lưu bởi Javascript hoặc Response Header.

Cookie có rất nhiều ứng dụng trong lập trình website. Và nó cũng cho phép ta cấu hình được rất nhiều thứ. Cụ thể

  1. Tên, giá trị của Cookie
  2. Thời gian hết hạn
  3. Phần nào của website được access vào Cookie để đọc dữ liệu
  4. Gửi cookie thông qua giao thức bảo mật hay không

Ví dụ hàm set-cookie trong Javascript:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Phức tạp quá, PHP sẽ set cookie từ phía server như sau:

setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 ngày

Cookie thường được dùng để đăng nhập, lưu vài giá trị cơ bản và đơn giản. Cookie không bị giới hạn bởi độ dài dung lượng hay ký tự. Tuy nhiên vì nó chuyển từ Client tới Server và ngược lại theo Header Request. Nên chúng càng nhẹ càng tốt. Trong các cách tăng tốc website thì giảm bớt Cookie là một ý kiến hay ho…

IndexedDB

Đây là cơ sở dữ liệu trên trình duyệt cho phép ứng dụng web có thể lưu trữ và query từ chính trình duyệt. Giúp website có thể hoạt động Offline hoặc Online tùy thuộc vào kỹ thuật cache chúng trên cơ sở dữ liệu này.

IndexedDB-Architecture
Mô phỏng cách hoạt động offline của website thông qua IndexedDB

Các ứng dụng Game thường sẽ dùng cách này. Các website thông thường hiếm khi nào sử dụng tới chúng.

Bản chất của IndexedDB là một cơ sở dữ liệu. Vì thế các query tới nó, ghi vào cơ sở dữ liệu cũng giống như các loại khác. Mình chỉ giới thiệu chứ không nói tới trong bài viết này. Bởi viết ra mà không dùng thì cũng mắc công. Còn thực sự các bạn cần sử dụng tới một cơ sở dữ liệu trên trình duyệt thì có thể tham khảo thêm tại trang của Mozilla nhé !

Thường dùng loại nào nhất ?

Mình thấy các website thường dùng nhất là LocalStorage để lưu các giá trị như form tìm kiếm hành trình … và chúng được lưu vĩnh viễn cho tới khi nào form tìm có phiên bản mới. Họ không cần phải modified chúng thường xuyên. Hiện tại mình cũng dùng cách này để “cache” rất nhiều thứ của website lên đó.

Mọi thắc mắc của các bạn vui lòng comment mình sẽ giải đáp !

TÁC GIẢ:

Tôi là Jam, thâm niên 7 năm thiết kế website và làm SEO. Hãy theo dõi blog của tôi để nhận được nhiều chia sẻ thú vị xung quanh chủ đề công nghệ.
Trang chủ / Công nghệ / Lập trình / Local Storage, Session Storage, indexedDB và Cookie trên trình duyệt

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *