로컬 스토리지 작업을위한 9 개의 JavaScript 라이브러리-JS 튜토리얼-php.cn

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

Joseph Gordon-Levitt

풀어 주다： 2025-02-19 08:47:10

원래의

608명이 탐색했습니다.

9 JavaScript Libraries for Working with Local Storage 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

// 发送消息 lsbridge.send('my-namespace', { message: 'Hello world!' }); // 监听消息 lsbridge.subscribe('my-namespace', function(data) { console.log(data); // 打印：'Hello world!' });
로그인 후 복사
로그인 후 복사

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']

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