>  기사  >  웹 프론트엔드  >  로컬 저장소를 더 잘 처리하려면 이 8개의 자바스크립트 라이브러리를 사용하세요! !

로컬 저장소를 더 잘 처리하려면 이 8개의 자바스크립트 라이브러리를 사용하세요! !

青灯夜游
青灯夜游앞으로
2020-11-25 18:02:133496검색

이 글에서는 로컬 저장소를 더 잘 처리할 수 있는 8개의 자바스크립트 라이브러리를 권장합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

로컬 저장소를 더 잘 처리하려면 이 8개의 자바스크립트 라이브러리를 사용하세요! !

현재 프로젝트에 대한 일부 로컬 저장소를 테스트했습니다. 어떤 멋진 기능이 있는지 알고 싶으십니까? 계속 읽어보세요.

Local Storage Bridge

https://github.com/krasimir/lsbridge

동일한 브라우저에서 한 탭에서 다른 탭으로 메시지를 보내야 하는 경우, 어렵게 할 필요가 없습니다. 로컬 스토리지 브리지는 작업을 더 쉽게 만들기 위해 여기에 있습니다.

기본 사용법:

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

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

Basil.js

로컬 저장소를 더 잘 처리하려면 이 8개의 자바스크립트 라이브러리를 사용하세요! !

Basil.js는 세션, localStorage 및 쿠키를 통합하여 데이터를 처리하는 직접적인 방법을 제공합니다.

기본 사용법:

let basil = new Basil(options);

basil.set(‘name’, ‘Amy’);
basil.get(‘name’);
basil.remove(‘name’);
basil.reset();

store.js

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

Store.js는 다른 것과 마찬가지로 데이터 저장을 처리합니다. 하지만 그 외에도 더 많은 고급 기능 중 하나를 통해 브라우저 지원에 대한 더 깊은 액세스를 제공합니다.

기본 사용법:

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

lscache

https://github.com/pamelafox/lscache

localStorage API와 유사합니다. 실제로 이는 localStorage를 둘러싼 래퍼이며 HTML5를 사용하여 memcaches 기능을 에뮬레이트합니다. 위 문서에서 더 많은 기능을 찾아보세요.

기본 사용법:

lscache.set(‘name’, ‘Amy’, 5); // 数据将在5分钟后过期
lscache.get(‘name’);

Lockr

로컬 저장소를 더 잘 처리하려면 이 8개의 자바스크립트 라이브러리를 사용하세요! !

Lockr는 localStorage API를 기반으로 구축되었습니다. 로컬 데이터를 보다 쉽게 ​​작업할 수 있는 몇 가지 유용한 방법을 제공합니다.

localStorage API 대신 이 라이브러리를 사용하려는 이유는 무엇입니까?

음, localStorage API는 문자열만 저장할 수 있습니다. 숫자를 저장하려면 먼저 숫자를 문자열로 변환해야 합니다. Lockr에서는 더 많은 데이터 유형과 객체까지 저장할 수 있기 때문에 이런 일이 발생하지 않습니다.

기본 사용법:

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

Barn

https://github.com/arokor/barn

Barn은 localStorage 위에 Redis와 유사한 API를 제공합니다. 지속성이 중요한 경우 오류가 발생할 경우 데이터 상태를 유지하려면 이 라이브러리가 필요합니다.

기본 사용법:

let barn = new Barn(localStorage);

// 原始类型
barn.set(‘name’, ‘Amy’);
let name = barn.get(‘name’); // Amy

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

localForage

https://github.com/localForage/localForage

이 간단하고 빠른 라이브러리는 IndexedDB 또는 WebSQL을 통한 비동기 저장소를 사용하여 웹의 오프라인 경험을 향상시킵니다. localStorage와 유사하지만 콜백 기능이 있습니다.

기본 사용법:

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
  }
});

놀라운 점은 중국어 문서를 제공한다는 것입니다(https://localforage.docschina.org/)

crypt.io

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

crypt.io는 안전한 브라우저 저장을 위해 표준 JavaScript 암호화 라이브러리를 사용합니다. crypto.io를 사용할 때 sessionStorage, localStorage 또는 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
});

다른 로컬 저장소를 알고 계신가요? 왜 그것을 사용합니까? 아래 댓글로 알려주세요!

영어 원본 주소: https://medium.com/javascript-in-plain-english/8-javascript-libraries-for-better-handling-local-storage-d8cd4a05dbfa

더 많은 프로그래밍 관련 지식을 원하시면, 방문해주세요: 코딩 비디오 강좌! !

위 내용은 로컬 저장소를 더 잘 처리하려면 이 8개의 자바스크립트 라이브러리를 사용하세요! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제