GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 27/02/2020 | 00:00 GMT+7

Cách sử dụng localForage để lưu trữ trình duyệt Easy Async

localForage là một thư viện shell bọc thuận tiện giúp làm mịn toàn cảnh thô sơ của database trình duyệt. Trong đó có một số:

  • lưu trữ local
  • IndexedDB
  • và Web SQL

Mỗi tùy chọn này ban đầu được thiết kế với cùng một mục đích: cung cấp khả năng lưu trữ liên tục trong trình duyệt. Thực tế là mỗi tùy chọn đều có những điểm mạnh và hạn chế riêng biệt có thể khiến một tác vụ database đơn giản trong trình duyệt mất hàng giờ đọc tài liệu.

Để cài đặt localForage, hãy chạy: $ npm install localforage

Lợi ích của việc sử dụng localForage

localForage giải quyết vấn đề này bằng cách cung cấp một API đơn giản bắt chước localStorage trong khi bao gồm các tính năng mạnh mẽ khác từ các database mạnh mẽ khác (như khả năng lưu trữ các đốm màu mà IndexedDB cung cấp).

Dưới đây tôi điểm qua một số lợi ích bạn sẽ thấy khi sử dụng localForage, cùng với một số ví dụ sử dụng!

Bắt chước API localStorage

Bạn đã biết API cho localForage nếu bạn biết localStorage !

import localForage from 'localforage';
const foo = 'hello world';

// Setting...
localStorage.setItem('myuniquekey', foo);
localForage.setItem('myuniquekey', foo);

// Getting...
localStorage.getItem('myuniquekey');   //=> 'hello world'
localForage.getItem('myuniquekey');    //=> 'hello world'

Nhiều phương thức localStorage như removeItem() , clear() , keys() và length() có sẵn trong localForage . Điều này làm cho các webdev gần như không cần nỗ lực để bắt đầu với nó!

Không cần tuần tự hóa

Có lẽ một trong những lợi ích lớn nhất khi sử dụng localForage là bạn không cần phải tuần tự hóa các giá trị của bạn !

const foo = {
  greeting: 'hello world'
};

localStorage.setItem('myuniquekey', JSON.stringify(foo));
JSON.parse(localStorage.getItem('myuniqekey'));
//=> {
//     greeting: 'hello world'
//   };

localForage.setItem('myuniquekey', foo); // 🤯
localForage.getItem('myuniquekey');
//=> {
//     greeting: 'hello world'
//   };

Lưu trữ các giá trị bằng localForage cho cảm giác liền mạch hơn so với localStorage . Điều này hoạt động với nhiều loại giá trị như mảng, số, file , v.v. và cho phép bạn bỏ qua sự đau đầu của việc tuần tự hóa các giá trị. 😅

localForage là không đồng bộ

localStorage là đồng bộ. Đây không phải là đáng xấu cho các giá trị nhỏ hơn như một chuỗi ngắn hoặc số, tuy nhiên nó thực sự chậm khi bạn cần phải làm việc với mảng lớn / đối tượng kể từ khi họ cần phải được chuyển đổi thành chuỗi .

localForage hoàn toàn không đồng bộ và cung cấp giao diện gọi lại hoặc ES6 Promise . Điều này làm cho nó hoạt động hiệu quả hơn bất kỳ thư viện đồng bộ nào vì nó sẽ không chặn luồng .

const foo = {
  greeting: 'hello world'
};

// ES6 Promise
localForage.setItem('myuniquekey', foo)
  .then((value) => {})    // do something with "foo"
  .catch((error) => {});  // handle errors

// Callback
localForage.setItem('myuniquekey', foo, (error, value) => {});

Thật tuyệt khi bạn có thể chọn giữa giao diện gọi lại hoặc giao diện Hứa hẹn!

Thoái hóa biến chất

Theo mặc định, localForage thích sử dụng các database này (theo thứ tự cụ thể này):

  1. IndexedDB
  2. WebSQL
  3. lưu trữ local

Nó sẽ thoái hóa một cách duyên dáng nếu database đó không có sẵn. Ví dụ: WebSQL không khả dụng trên Firefox Desktop, vì vậy thay vào đó, nó sẽ chuyển thành localStorage. Điều này xảy ra tự động mà không cần bất kỳ hành động nào từ phía bạn. 🆒

Tuy nhiên, nếu bạn muốn đặt một thứ tự database dự phòng khác, bạn có thể sử dụng phương thức setDriver() hoặc config() :

import localForage from 'localforage';

// Using setDriver()
localForage.setDriver([
  localForage.INDEXEDDB,
  localForage.LOCALSTORAGE,
  localForage.WEBSQL,
]);

// Using config()
localForage.config({
  driver: [
    localForage.INDEXEDDB,
    localForage.LOCALSTORAGE,
    localForage.WEBSQL,
  ],
  name: 'myApp',     // These fields
  version: 1.0,      // are totally optional
});

Nếu bạn muốn cung cấp một database độc quyền cho localForage sử dụng, hãy chuyển một giá trị duy nhất thay vì một mảng!

localForage.setDriver(localForage.LOCALSTORAGE);

Lưu ý cả phương thức setDriver() và config() phải được đặt trước khi localForage được sử dụng để tương tác với database .

Kết thúc

localForage là một thư viện lưu trữ trình duyệt mạnh mẽ và dễ sử dụng! Nó được phát triển với sự hỗ trợ của Mozilla và được bảo trì rất tốt. Truy cập trang web tài liệu để biết thêm hướng dẫn về cách localForage có thể hoạt động cho bạn 🤓

Tags:

Các tin liên quan