8 thư viện JavaScript để xử lý lưu trữ cục bộ (Local Storage) tốt hơn

Như chúng ta đã biết, HTTP là một giao thức không trạng thái, máy khách khởi tạo một yêu cầu, máy chủ xử lý yêu cầu từ máy khách và sau đó gửi phản hồi lại cho máy khách. Sau khi quá trình trao đổi dữ liệu giữa máy khách và máy chủ hoàn tất, kết nối giữa máy chủ và máy khách sẽ bị đóng lại, máy chủ hầu như không có thông tin để xác định người dùng nào đã gửi yêu cầu cũng như không thể ghi lại chuỗi yêu cầu của người dùng truy cập mỗi khi dữ liệu được trao đổi Cần thiết lập kết nối mới, sau này có người dùng, website muốn hiểu được nhu cầu của người dùng, tuy nhiên theo hiện trường lúc đó thì rõ ràng là không thể đáp ứng được nhu cầu công việc, chính vì vậy việc lưu trữ cục bộ(Local Storage) ra đời có thể bù đắp phần phần nào trạng thái của giao thức HTTP.

Bài viết liên quan: 10 mẹo để cải thiện hiệu suất của các ứng dụng Web lên 10 lần

Local Storage la gì?

Local Storage là một loại lưu trữ chủ yếu trên web cho phép các trang web và ứng dụng JavaScript lưu trữ và truy cập dữ liệu ngay trong trình duyệt mà không có ngày hết hạn. Điều này có nghĩa là dữ liệu được lưu trữ trong trình duyệt sẽ vẫn tồn tại ngay cả khi cửa sổ trình duyệt đã bị đóng. Và một bài viết này tổng hợp lại 8 thư viện xử lý local store JavaScript rất gọn nhẹ, và bạn có thể sử dụng bất cứ khi nào bạn cần.

1 - The Local Storage Bridge

https://github.com/krasimir/lsbridge 

Nếu bạn phải gửi tin nhắn từ tab này sang tab khác trong cùng một trình duyệt, bạn không cần phải sử dụng cách khó. Sử dụng lsbridge ở đây làm cho nhiệm vụ này của bạn dễ dàng hơn. 

Ví dụ:

// Send
lsbridge.send(‘app.message.error’, { error: ‘Out of memory’ });

// track
lsbridge.subscribe(‘app.message.error’, function(data) {
  console.log(data); // { error: ‘Out of memory’ }
});

2 - Basil.js

Basil.js là gì? Basil.js có nhiệm vụ hợp nhất của session, localStorage và cookie, đồng thời cung cấp cho bạn một phương pháp xử lý dữ liệu trực tiếp. https://wisembly.github.io/basil.js/ 

Sử dụng cơ bản:

let basil = new Basil(options);
basil.set(‘name’, ‘Amy’);
basil.get(‘name’);
basil.remove(‘name’);
basil.reset();

3 - store.js

https://github.com/marcuswestin/store.js 

Store.js là gì? Store.js xử lý việc lưu trữ dữ liệu giống như mọi thứ khác. Nhưng có nhiều chức năng hơn và một trong những tính năng nâng cao của nó là cho phép bạn truy cập sâu hơn vào hỗ trợ trình duyệt. 

Sử dụng cơ bản:

store.set(‘book’, { title: ‘JavaScript’ }); // Store a book
store.get(‘book’); // Get stored book
store.remove(‘book’); // Remove stored book
store.clearAll(); // Clear all keys

4 - lscache

https://github.com/pamelafox/lscache 

lscache tương tự như API localStorage. Trên thực tế, nó là một trình bao bọc cho localStorage và sử dụng HTML5 để mô phỏng hàm memcaches. Tìm thêm các tính năng trong tài liệu trên. 

Gợi ý: 8 mẹo tối ưu hoá javascript mọi developer đều phải biết

Sử dụng cơ bản:

lscache.set(‘name’, ‘Amy’, 5); 
lscache.get(‘name’);

5 - Lockr là gì?

Lockr được xây dựng dựa trên API localStorage. Nó cung cấp một số phương pháp hữu ích để xử lý dữ liệu cục bộ dễ dàng hơn. Điều gì khiến bạn muốn sử dụng thư viện này thay vì API localStorage? Vâng, API localStorage chỉ cho phép bạn lưu trữ các chuỗi. Nếu bạn muốn lưu trữ một số, trước tiên bạn cần chuyển số đó thành chuỗi. Điều này sẽ không xảy ra trong Lockr, vì Lockr cho phép bạn lưu trữ nhiều loại dữ liệu hơn và thậm chí cả các đối tượng. 

Sử dụng cơ bản:

Lockr.set(‘name’, ‘Amy’);
Lockr.set(‘age’, 28);
Lockr.set(‘books’, [{title: ‘JavaScript’, price: 11.0}, {title: ‘Python’, price: 9.0}]);

6 - Barn

https://github.com/arokor/barn 

Barn cung cấp một API giống Redis trên localStorage. Nếu sự bền bỉ là quan trọng, thì bạn sẽ cần thư viện này để duy trì trạng thái dữ liệu trong trường hợp xảy ra lỗi. 

Sử dụng cơ bản:

let barn = new Barn(localStorage);

barn.set(‘name’, ‘Anonystick.com’);
let name = barn.get(‘name’); // Anonystick.com

// List
barn.lpush(‘names’, ‘Anonystick.com’);
barn.lpush(‘names’, ‘James’);
let name1 = barn.rpop(‘names’); // Anonystick.com
let name2 = barn.rpop(‘names’); // James

7 - localForage

https://github.com/localForage/localForage 

Thư viện đơn giản và nhanh chóng này sẽ sử dụng lưu trữ không đồng bộ thông qua IndexedDB hoặc WebSQL để cải thiện trải nghiệm ngoại tuyến của Web. Nó tương tự như localStorage, nhưng có chức năng gọi lại. 

Sử dụng cơ bản:

localforage.setItem(‘name’, ‘Amy’, function(error, value) {
  // Do something
});

localforage.getItem(‘name’, function(error, value) {
  if (error) {
    console.log(‘an error occurs’);
  } else {
    // Do something with the value
  }
});

8 - crypt.io

https://github.com/jas-/crypt.io 

crypt.io sử dụng thư viện mã hóa JavaScript tiêu chuẩn để triển khai lưu trữ trình duyệt an toàn. Khi sử dụng crypto.io, có ba tùy chọn lưu trữ: sessionStorage, localStorage hoặc cookie. 

Sử dụng cơ bản:

let storage = crypto;
let book = { title: ‘JavaScript’, price: 13 };

storage.set(‘book’, book, function(error, results) {
  if (error) {
    throw error;
  }
  
  // Do something
});

storage.get(‘book’, function(error, results) {
  if (error) {
    throw error;
  }
  // Do something
});

Lời kết

Trên đây là 8 thư viện javascript cần thiết cho việc lưu trữ dữ liệu cục bộ dành cho những bạn nào thực sự cần thiết. Nhưng mà tôi cũng khuyến khích các bạn nên học cách sủ dụng vanilla javascript hơn, vì khi học chúng ta sẽ phải mằn mò nhiều thứ hơn từ đó bạn có thể hiểu sâu hơn về javascript. 

Nếu bạn nào biết thêm một hay nhiều thư viện nữa thì vui lòng comment dưới bài viết để tôi và các bạn có thể tham khảo thêm. Chúc may mắn.

Nguồn: anonystick