로컬 스토리지 작업을위한 9 개의 JavaScript 라이브러리
- Joseph Gordon-Levitt원래의
- 2025-02-19 08:47:10615검색
키 포인트
- lockr
- Lockr은 많은 유용한 방법과 기능을 사용할 수있는 LocalStorage API의 래퍼입니다. 예를 들어 LocalStorage는 문자열 저장으로 제한되지만 Lockr은 직접 변환하지 않고도 다른 데이터 유형을 저장할 수 있습니다.
-
Lockr.get () 메소드를 사용하여 모든 키 값 쌍을 검색 leopr.getall () 메소드를 사용하여 모든 키 값 쌍을 배열로 컴파일합니다. Lockr.flush () 메소드를 사용하여 저장된 모든 키 값 쌍 를 삭제하십시오. Lockr.SADD 및 Lockr.SREM을 사용하여 해시 키에서 값을 추가/제거하십시오.
동일한 브라우저에서 탭 간의 메시지 교환을 용이하게하기 위해 LocalStorage를 통신 채널로 사용하기위한 1KB 라이브러리. 라이브러리가 포함되면 여기에 사용할 수있는 샘플 코드가 있습니다.
이 라이브러리는 LocalStorage 상단에 "빠른 원자 화 된 지속성 저장 레이어"를 제공하는 Redis와 같은 API를 제공합니다. 아래는 repo의 readme에서 가져온 샘플 코드 스 니펫입니다. 사용 가능한 많은 방법을 보여줍니다.
<code class="language-javascript">Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象</code>
<code class="language-javascript">Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象</code>
API의 다른 기능으로는 시작/끝 값을 사용하여 범위를 얻고 항목 배열을 가져 오며 전체 데이터 저장소를 압축하여 공간을 절약하는 기능이 포함됩니다. 이 repo에는 모든 방법과 그 기능에 대한 완전한 참조가 포함되어 있습니다. store.js
lscache
LocalForage 예를 들어, 값을 설정하거나받는 지 여부에 관계없이 리턴 값을 얻지 못하지만 콜백 함수로 전달 된 데이터를 처리하고 (선택 사항) 오류를 처리 할 수 있습니다.
<code class="language-javascript">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']</code>
secstore.js <code class="language-javascript">Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象</code>입니다.
-
마지막으로 옵션 객체에서 옵션 개체를 사용하여 다음을 정의 할 수 있습니다.
존경할만한 언급
<code class="language-javascript">// 发送消息
lsbridge.send('my-namespace', {
message: 'Hello world!'
});
// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
console.log(data); // 打印：'Hello world!'
});</code>
<code class="language-javascript">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']</code>
AngularJS 클라이언트 스토리지 - Angular JS 네임 스페이스 클라이언트 스토리지. LocalStorage에 쓰고 쿠키로 돌아갑니다. Angular Core를 제외하고는 외부 의존성이 없습니다.
.
JavaScript 로컬 리포지토리 (FAQ) 에 대한 자주 묻는 질문
Q : JavaScript 로컬 리포지토리를 사용하면 어떤 이점이 있습니까?
a :
Q : 로컬 스토리지는 JavaScript에서 어떻게 작동합니까?
a : JavaScript의 로컬 스토리지를 사용하면 웹 응용 프로그램이 웹 브라우저에 데이터를 저장할 때 지속될 수 있습니다. 쿠키와 달리 로컬 스토리지는 만료되지 않으며 서버로 다시 전송되지 않으므로보다 효율적인 데이터 저장 방법입니다. 로컬 스토리지에 저장된 데이터는 브라우저 세션에 걸쳐 저장됩니다. 즉, 브라우저가 닫히고 다시 열더라도 여전히 사용할 수 있습니다. Q : 민감한 데이터에 로컬 스토리지를 사용할 수 있습니까?
A :
Q : 로컬 스토리지에서 데이터를 관리하는 방법은 무엇입니까?
A : 로컬 스토리지에서 데이터 관리에는 세 가지 주요 작업이 포함됩니다. 항목 설정, 항목 가져 오기 및 항목 삭제가 포함됩니다. 프로젝트를 설정하려면 setitem () 메소드를 사용할 수 있습니다. 항목을 검색하려면 키를 인수로 받아들이고 해당 값을 반환하는 getItem () 메소드를 사용할 수 있습니다. 항목을 삭제하려면 removeItem () 메소드를 사용하여 키를 인수로 받아 들일 수 있습니다. Q : 인기있는 지역 JavaScript 저장소는 무엇입니까?
a : Store.js, LocalForage 및 JS-Cookie를 포함하여 JavaScript에 대한 몇 가지 인기있는 지역 저장소가 있습니다. Store.js는 로컬 스토리지를위한 간단하고 일관된 API를 제공하며 모든 주요 브라우저에서 실행됩니다. LocalForage는 강력한 비동기 스토리지 API를 제공하며 IndexEddb, WebSQL 및 LocalStorage를 지원합니다. JS-Cookie는 로컬 스토리지를 사용할 수 없을 때 폴백으로 사용할 수있는 쿠키를 처리하기위한 경량 라이브러리입니다. A : JavaScript의 간단한 시도/캐치 블록을 사용하여 로컬 스토리지를 사용할 수 있는지 확인할 수 있습니다. Window.localStorage 속성은 로컬 스토리지 개체에 액세스하는 데 사용될 수 있습니다. 이 속성이 존재하고 품목을 설정하고 검색하는 데 사용될 수있는 경우 로컬 스토리지를 사용할 수 있습니다.
Q : 로컬 스토리지의 저장 한도는 얼마입니까? 로컬 스토리지의 스토리지 제한은 브라우저마다 다르지만 일반적으로 약 5MB입니다. 이것은 쿠키의 저장 한계 (4KB)보다 훨씬 큽니다. 그러나 너무 많은 데이터가 웹 애플리케이션 속도를 늦출 수 있으므로 로컬 스토리지에 저장하는 데이터의 양을 인식하는 것이 좋습니다.
Q : 다른 브라우저간에 로컬 스토리지를 공유 할 수 있습니까? 아니요, 다른 브라우저간에 로컬 스토리지를 공유 할 수 없습니다. 각 웹 브라우저에는 자체 독립적 인 로컬 스토리지가 있으므로 한 브라우저에 저장된 데이터는 다른 브라우저에서 사용할 수 없습니다. 이것은 로컬 스토리지에 의존하는 웹 응용 프로그램을 설계 할 때 중요합니다.
Q : 로컬 스토리지의 모든 데이터를 지우는 방법은 무엇입니까?
a :
Q : 모바일 장치에서 로컬 스토리지를 사용할 수 있습니까?
a : <code class="language-javascript">// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');
// 获取'website'
store.get('website');
// 删除'website'
store.remove('website');
// 清除所有键
store.clear();</code>
JSCACHE - LocalStorage를 사용하여 JavaScript 파일, CSS 스타일 시트 및 이미지의 캐시 활성화.
다른 도서관을 알고 있습니까?
위 내용은 로컬 스토리지 작업을위한 9 개의 JavaScript 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!