로컬 스토리지 작업을위한 9 개의 JavaScript 라이브러리

HTML5 로컬 스토리지 API (웹 스토리지의 일부)는 우수한 브라우저 지원이 있으며 점점 더 많은 응용 프로그램에 적용되고 있습니다. 간단한 API가 있지만 쿠키와 비슷한 단점도 있습니다.

나는 지난 1 년 동안 LocalStorage API를 사용하여 몇 가지 도구와 라이브러리를 만났으므로 일부 코드 예제 및 기능 토론을 통해이 게시물에 정렬했습니다.

키 포인트

HTML5 로컬 스토리지 API는 널리 지원되고 응용 프로그램에서 점점 더 일반화되고 있지만 쿠키와 유사한 일부 제한 사항이 있습니다. 기능을 개선하고 확장하기 위해 다양한 JavaScript 라이브러리가 개발되었습니다.

lockr, store.js 및 lscache는 LocalStorage API에 래퍼를 제공하여 추가 사용 방법 및 기능을 제공합니다. 여기에는 수동 변환없이 다양한 데이터 유형을 저장, 더 깊은 브라우저 지원 및 Memcached Memory Object 캐싱 시스템의 시뮬레이션이 포함됩니다. <.> secstore.js 및 localforage는보다 전문적인 기능을 제공합니다. Secstore.js는 Stanford JavaScript Crypto 라이브러리를 통해 보안 계층을 추가하는 반면 Mozilla가 제작 한 LocalForage는 IndexedDB 또는 WebSQL을 사용하여 비동기 스토리지 API를 제공합니다. Basil.js 및 LZ-String과 같은 다른 라이브러리는 고유 한 기능을 제공합니다. BASIL.JS는 통일 된 로컬 스터리지, 세션 스토리지 및 쿠키 API로 네임 스페이스, 스토리지 메소드 우선 순위 및 기본 스토리지를 정의 할 수 있습니다. LZ-String은 압축을 통해 로컬 스토리지에 다량의 데이터를 저장할 수 있습니다.

• lockr
• Lockr은 많은 유용한 방법과 기능을 사용할 수있는 LocalStorage API의 래퍼입니다. 예를 들어 LocalStorage는 문자열 저장으로 제한되지만 Lockr은 직접 변환하지 않고도 다른 데이터 유형을 저장할 수 있습니다.
다른 기능은 다음과 같습니다
• Lockr.get () 메소드를 사용하여 모든 키 값 쌍을 검색 leopr.getall () 메소드를 사용하여 모든 키 값 쌍을 배열로 컴파일합니다. Lockr.flush () 메소드를 사용하여 저장된 모든 키 값 쌍 를 삭제하십시오. Lockr.SADD 및 Lockr.SREM을 사용하여 해시 키에서 값을 추가/제거하십시오.
로컬 스토리지 브리지

동일한 브라우저에서 탭 간의 메시지 교환을 용이하게하기 위해 LocalStorage를 통신 채널로 사용하기위한 1KB 라이브러리. 라이브러리가 포함되면 여기에 사용할 수있는 샘플 코드가 있습니다. 표시된대로, send () 메소드는 메시지를 생성하고 보내고, subscribe () 메소드를 사용하면 지정된 메시지를들을 수 있습니다. 이 블로그 게시물에서 라이브러리에 대한 자세한 내용을 읽을 수 있습니다.

헛간

이 라이브러리는 LocalStorage 상단에 "빠른 원자 화 된 지속성 저장 레이어"를 제공하는 Redis와 같은 API를 제공합니다. 아래는 repo의 readme에서 가져온 샘플 코드 스 니펫입니다. 사용 가능한 많은 방법을 보여줍니다.

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

API의 다른 기능으로는 시작/끝 값을 사용하여 범위를 얻고 항목 배열을 가져 오며 전체 데이터 저장소를 압축하여 공간을 절약하는 기능이 포함됩니다. 이 repo에는 모든 방법과 그 기능에 대한 완전한 참조가 포함되어 있습니다.

store.js

이것은 Lockr과 비슷한 또 다른 래퍼이지만 이번에는 폴백을 통해 더 깊은 브라우저 지원을 제공합니다. ReadMe는 "Store.js는 사용 가능한 경우 LocalStorage를 사용하고 IE6 및 IE7의 UserData 동작으로 돌아갑니다. 페이지로드를 늦추는 플래시가 없습니다. 네트워크 요청에 대한 부담을 높이는 쿠키는 없습니다.". 기본 API는 다음 코드의 주석에 설명되어 있습니다. 또한 더 고급 기능이 있습니다

GitHub Repo의 README는 고려할 브라우저 지원의 깊이 및 잠재적 버그 및 함정에 대해 자세히 설명합니다 (예 : 일부 브라우저는 프라이버시 모드에서 로컬 스토리지를 허용하지 않습니다).

lscache

이전 라이브러리와 마찬가지로이 라이브러리는 직렬화를 처리하므로 개체를 저장하고 검색 할 수 있습니다.

마지막으로 LSCACHE를 사용하면 데이터를 "버킷"으로 나눌 수 있습니다. 이 코드를 확인하십시오 :

두 번째 로그에서 결과는 null입니다. 결과를 기록하기 전에 사용자 정의 버킷을 설정했기 때문입니다. 양동이를 설정하면 새로 고침을 시도하더라도 LSCACHE에 추가 ​​된 것은 액세스 할 수 없습니다. "기타"버킷의 항목 만 접근 가능하거나 새로 고칠 수 있습니다. 그런 다음 버킷을 재설정하면 원래 데이터에 다시 액세스 할 수있었습니다.

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

secstore.js

secstore.js는 Stanford JavaScript Crypto 라이브러리를 통해 선택적인 보안 계층을 추가하는 데이터 스토리지 API입니다. Secstore.js를 사용하면 LocalStorage, SessionStorage 또는 Cookie와 같은 스토리지 방법을 선택할 수 있습니다. secstore.js를 사용하려면 앞에서 언급 한 sjcl.js 라이브러리도 포함해야합니다.

다음은 "true"로 설정된 암호화 옵션으로 일부 데이터를 저장하는 방법을 보여주는 예입니다. 지정된 옵션 (사용자 정의 데이터 포함)과 결과를 테스트 할 수있는 콜백 함수를 전달하는 Set () 메소드를 참고하십시오. 그런 다음 get () 메소드를 사용하여 데이터를 검색 할 수 있습니다. Secstore.js의 LocalStorage 대신 SessionStorage 또는 쿠키를 사용하려면 옵션에서 정의 할 수 있습니다.

LocalForage

Mozilla가 제작 한이 라이브러리는 간단한 LocalStorage와 같은 API를 제공하지만 IndexedDB 또는 WebSQL을 통해 비동기 스토리지를 사용합니다. API는 API가 비동기식이고 구문에 콜백을 사용해야한다는 점을 제외하고 LocalStorage (getitem (), setitem () 등과 정확히 동일합니다.

예를 들어, 값을 설정하거나받는 지 여부에 관계없이 리턴 값을 얻지 못하지만 콜백 함수로 전달 된 데이터를 처리하고 (선택 사항) 오류를 처리 할 수 ​​있습니다.

LocalForage에 대한 다른 요점 :

지원 JavaScript Promise 지원 다른 라이브러리와 마찬가지로, 그것은 문자열 저장에만 국한된 것뿐만 아니라 객체를 설정하고 가져 오는 것도

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

입니다. config () 메소드 를 사용하여 데이터베이스 정보를 설정할 수 있습니다.

basil.js

Basil.js는 통합 된 로컬 스터리지, 세션 스터리지 및 쿠키 API로 설명되며, 여기에는 독특하고 매우 사용하기 쉬운 기능이 포함되어 있습니다. 기본 방법은 다음과 같이 사용할 수 있습니다
• 당신은 또한 basil.js를 사용하여 LocalStorage를 사용할 수 있는지 테스트 할 수도 있습니다.
basil.js는 또한 쿠키 또는 SessionStorage를 사용할 수 있습니다.
• 마지막으로 옵션 객체에서 옵션 개체를 사용하여 다음을 정의 할 수 있습니다.
데이터의 다른 부분에 대한 네임 스페이스 우선 스토리지 방법을 사용할 수 있습니다 기본 저장소 쿠키의 만료일

lz-string

compress () 및 decompress () 방법의 사용에주의를 기울이십시오. 위의 코드의 주석은 압축 전후의 길이 값을 보여줍니다. 클라이언트 스토리지가 항상 공간에 제한되어 있기 때문에 이것이 얼마나 유익한 지 알 수 있습니다. 라이브러리 문서에 설명 된 바와 같이, 데이터를 uint8array (JavaScript의 최신 데이터 유형)로 압축하고 클라이언트에 외부로 저장하기 위해 데이터를 압축하도록 선택할 수 있습니다.

존경할만한 언급

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

위의 도구는 LocalStorage에서 원하는 거의 모든 것을 수행하는 데 도움이 될 수 있지만, 더 많은 것을 찾고 있다면 확인하고 싶은 더 관련 도구와 라이브러리가 있습니다.

lokijs-Node.js, 브라우저 및 Cordova를위한 빠른 메모리 내 문서 지향 데이터 저장소.

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

AngularJS 클라이언트 스토리지 - Angular JS 네임 스페이스 클라이언트 스토리지. LocalStorage에 쓰고 쿠키로 돌아갑니다. Angular Core를 제외하고는 외부 의존성이 없습니다.

Angular-Locker-각도 프로젝트에서 로컬/세션 스토리지의 간단하고 구성 가능한 추상화로 강력하고 사용하기 쉬운 부드러운 API를 제공합니다.

// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

// 获取'website'
store.get('website');

// 删除'website'
store.remove('website');

// 清除所有键
store.clear();

JSCACHE - LocalStorage를 사용하여 JavaScript 파일, CSS 스타일 시트 및 이미지의 캐시 활성화.

LargelocalStorage-다양한 브라우저 결함을 극복하고 클라이언트 측에서 큰 키 가치 저장소를 제공합니다.

다른 도서관을 알고 있습니까?
• LocalStorage API 또는 관련 도구 위에 클라이언트 스토리지를 향상시키기위한 몇 가지 도구를 구축 한 경우 의견에 자유롭게 알려주십시오.
  (기사의 나머지 부분은 FAQ이며 원래 텍스트에 따라 재 작성 및 간소화되었으며 원래 의도가 유지됩니다)

  . JavaScript 로컬 리포지토리 (FAQ) 에 대한 자주 묻는 질문 Q : JavaScript 로컬 리포지토리를 사용하면 어떤 이점이 있습니까? a :

  JavaScript 로컬 리포지토리는 많은 이점을 제공합니다. 고객 측에 데이터를 저장하는보다 효율적인 방법을 제공하여 웹 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. 이 라이브러리는 또한 데이터 암호화를 허용하므로 기존 데이터 저장 방법보다 더 높은 수준의 보안을 제공합니다. 또한 데이터 관리에보다 사용자 친화적 인 인터페이스를 제공하여 개발자가 로컬 스토리지를보다 쉽게 ​​사용할 수 있습니다.

  Q : 로컬 스토리지는 JavaScript에서 어떻게 작동합니까? a : JavaScript의 로컬 스토리지를 사용하면 웹 응용 프로그램이 웹 브라우저에 데이터를 저장할 때 지속될 수 있습니다. 쿠키와 달리 로컬 스토리지는 만료되지 않으며 서버로 다시 전송되지 않으므로보다 효율적인 데이터 저장 방법입니다. 로컬 스토리지에 저장된 데이터는 브라우저 세션에 걸쳐 저장됩니다. 즉, 브라우저가 닫히고 다시 열더라도 여전히 사용할 수 있습니다.

  Q : 민감한 데이터에 로컬 스토리지를 사용할 수 있습니까? A :

  로컬 스토리지는 클라이언트에 데이터를 저장하는 편리한 방법을 제공하지만 민감한 데이터를 저장하는 데 사용하는 것이 좋습니다. 로컬 스토리지는 안전한 스토리지 메커니즘으로 설계되지 않았기 때문입니다. 로컬 스토리지에 저장된 데이터는 간단한 JavaScript 코드를 사용하여 쉽게 액세스하고 조작 할 수 있습니다. 따라서 암호, 신용 카드 번호 또는 개인 사용자 정보와 같은 민감한 데이터는 로컬 스토리지에 저장되지 않아야합니다.

  Q : 로컬 스토리지에서 데이터를 관리하는 방법은 무엇입니까? A : 로컬 스토리지에서 데이터 관리에는 세 가지 주요 작업이 포함됩니다. 항목 설정, 항목 가져 오기 및 항목 삭제가 포함됩니다. 프로젝트를 설정하려면 setitem () 메소드를 사용할 수 있습니다. 항목을 검색하려면 키를 인수로 받아들이고 해당 값을 반환하는 getItem () 메소드를 사용할 수 있습니다. 항목을 삭제하려면 removeItem () 메소드를 사용하여 키를 인수로 받아 들일 수 있습니다.

  Q : 인기있는 지역 JavaScript 저장소는 무엇입니까? a : Store.js, LocalForage 및 JS-Cookie를 포함하여 JavaScript에 대한 몇 가지 인기있는 지역 저장소가 있습니다. Store.js는 로컬 스토리지를위한 간단하고 일관된 API를 제공하며 모든 주요 브라우저에서 실행됩니다. LocalForage는 강력한 비동기 스토리지 API를 제공하며 IndexEddb, WebSQL 및 LocalStorage를 지원합니다. JS-Cookie는 로컬 스토리지를 사용할 수 없을 때 폴백으로 사용할 수있는 쿠키를 처리하기위한 경량 라이브러리입니다.

  Q : 로컬 스토리지를 사용할 수 있는지 확인하는 방법은 무엇입니까?

  A :

  JavaScript의 간단한 시도/캐치 블록을 사용하여 로컬 스토리지를 사용할 수 있는지 확인할 수 있습니다. Window.localStorage 속성은 로컬 스토리지 개체에 액세스하는 데 사용될 수 있습니다. 이 속성이 존재하고 품목을 설정하고 검색하는 데 사용될 수있는 경우 로컬 스토리지를 사용할 수 있습니다. Q : 로컬 스토리지의 저장 한도는 얼마입니까?

  a :

  로컬 스토리지의 스토리지 제한은 브라우저마다 다르지만 일반적으로 약 5MB입니다. 이것은 쿠키의 저장 한계 (4KB)보다 훨씬 큽니다. 그러나 너무 많은 데이터가 웹 애플리케이션 속도를 늦출 수 있으므로 로컬 스토리지에 저장하는 데이터의 양을 인식하는 것이 좋습니다. Q : 다른 브라우저간에 로컬 스토리지를 공유 할 수 있습니까?

  A :

  아니요, 다른 브라우저간에 로컬 스토리지를 공유 할 수 없습니다. 각 웹 브라우저에는 자체 독립적 인 로컬 스토리지가 있으므로 한 브라우저에 저장된 데이터는 다른 브라우저에서 사용할 수 없습니다. 이것은 로컬 스토리지에 의존하는 웹 응용 프로그램을 설계 할 때 중요합니다. Q : 로컬 스토리지의 모든 데이터를 지우는 방법은 무엇입니까? a :

  CLEAR () 메소드를 사용하여 로컬 스토리지의 모든 데이터를 지우실 수 있습니다. 이 방법은 매개 변수를 허용하지 않으며 로컬 스토리지에서 모든 항목을 삭제합니다. 이 방법을 사용할 때는 로컬 스토리지의 모든 데이터를 영구적으로 삭제하므로주의하십시오.

  Q : 모바일 장치에서 로컬 스토리지를 사용할 수 있습니까? a :

  예, 로컬 스토리지는 모바일 장치에서 사용할 수 있습니다. 대부분의 최신 모바일 웹 브라우저는 로컬 스토리지를 지원하므로 데스크탑 및 모바일 장치에서 사용하여 데이터를 저장할 수 있습니다. 그러나 모바일 장치의 스토리지 제한은 낮을 수 있으므로 웹 애플리케이션을 설계 할 때이를 고려하는 것이 중요합니다.

위 내용은 로컬 스토리지 작업을위한 9 개의 JavaScript 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!