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

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

Để xử lý Local Storage tốt hơn, nhiều thư viện tiện ích đã được phát triển trong vài năm qua. Và sau đây là danh sách tóm lược một số các thư viện hữu ích và được sử dụng nhiều. Trong bài viết này Bizfly Cloudđã 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.

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.

1 - The Local Storage Bridge

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, sử dụng lsbridge sẽ giúp cho nhiệm vụ này của bạn dễ dàng hơn.

// 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 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. 

let basil = new Basil(options);

basil.set(‘name’, ‘Amy’);

basil.get(‘name’);

basil.remove(‘name’);

basil.reset();

3 - Store.js

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. 

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

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. 

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

lscache.get(‘name’);

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

5 - Lockr

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. 

Lockr.set(‘name’, ‘Amy’);

Lockr.set(‘age’, 28);

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

6 - 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. 

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

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. 

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

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. 

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 bạn khi thực sự cần thiết. Hy vọng bài viết giúp ích cho công việc của bạn. Theo dõi thêm nhiều tin tức công nghệ và thủ thuật tiện ích trên website của BizFly Cloud bạn nhé!

SHARE