LocalStorage에 데이터를 저장하는 것은 유용하지만 여러 장치 나 브라우저에서 공유 해야하는 데이터를 저장할 때는 좋은 솔루션이 아닙니다.
예를 들어, 제품에 가입 한 모든 신규 사용자에게 환영 모달을 보여주고 싶다고 가정 해 봅시다. 사용자가 이미이 모달을 보았는지 추적하기 위해 LocalStorage를 사용하는 경우, 사용자는 장치 나 브라우저를 전환 할 때마다 계속해서 계속해서 경험을 얻게됩니다.
RemoteStorage가 등장하는 곳입니다. LocalStorage와 동일한 API를 사용하여 Remotestorage를 사용하면 더 나은 사용자 경험을 제공하기 위해 브라우저 및 장치에서 상태를 유지하면서 쉽게 데이터를 읽고 쓸 수 있습니다.
좋아하는 패키지 관리자를 사용하여 라이브러리를 설치하십시오.
npm install remote-storage또는 간단히 HTML에 포함 시키십시오.
< script src =" https://unpkg.com/remote-storage@latest/dist/remote-storage.min.js " sync > </ script >라이브러리를 가져 와서 LocalStorage처럼 사용하십시오.
import { RemoteStorage } from 'remote-storage'
const remoteStorage = new RemoteStorage ( { userId : "my-user-id" } )
const hasSeenNewFeature = await remoteStorage . getItem ( 'hasSeenNewFeature' )
if ( ! hasSeenNewFeature ) {
await remoteStorage . setItem ( 'hasSeenNewFeature' , true )
// Highlight your new and exciting feature!
}그게 다야!
Remotestorage는 사용자 ID를 사용하여 사용자를 식별합니다. 사용자 ID는 사용자를 고유하게 식별하는 문자열입니다. 원하는 것이 될 수 있지만 사용자가 다른 사용자 ID를 추측하고 데이터에 액세스하는 것을 방지하기 위해 문화 할 수없는 UUID를 사용하는 것이 좋습니다.
remotestorage의 새 인스턴스를 만들 때 사용자 ID가 설정됩니다.
const remoteStorage = new RemoteStorage ( {
userId : '123e4567-e89b-12d3-a456-426614174000'
} )사용자 ID를 제공하지 않으면 Remotestorage는 사용자가 사이트를 방문 할 때마다 변경되는 임의의 UUID를 생성합니다. 이것은 테스트에 유용하지만 데이터가 장치 나 브라우저에서 지속되지 않기 때문에 Remotestorage의 목적을 물리칩니다.
Remotestorage는 인스턴스 IDS를 사용하여 요청을하는 응용 프로그램 인스턴스를 식별합니다. 인스턴스 ID는 응용 프로그램 인스턴스를 고유하게 식별하는 문자열입니다. 일반적으로 동일한 응용 프로그램 인스턴스의 모든 요청에 대해 동일한 인스턴스 ID를 사용합니다.
인스턴스 ID는 Remotestorage의 새 인스턴스를 만들 때 설정됩니다.
const remoteStorage = new RemoteStorage ( {
userId : '123e4567-e89b-12d3-a456-426614174000' ,
instanceId : 'my-cool-app'
} ) 우리는 https://api.remote.storage 에서 무료 호스팅 커뮤니티 서버를 제공합니다 ( serverAddress 제공되지 않은 경우 기본 동작). 이 호스팅 서버는 프로덕션 앱에 사용해서는 안되지만 테스트 및 프로토 타이핑에 좋습니다.
다른 서버를 사용하려면 새로운 remotestorage 인스턴스를 만들 때 serverAddress 옵션을 전달하기 만하면됩니다.
const remoteStorage = new RemoteStorage ( {
serverAddress : 'https://api.remote.storage' ,
userId : '123e4567-e89b-12d3-a456-426614174000' ,
instanceId : 'my-cool-app'
} )몇 분 안에 Docker를 사용하여 서버를 돌릴 수 있습니다. 자세한 내용은 서버 문서를 참조하십시오.
Remotestorage는 비 인식 데이터에만 사용해야합니다. 사용자 기본 설정, 설정 및 기타 비 민감한 데이터와 같은 경우 사용하는 것이 좋습니다. 공개 API의 특성으로 인해 비밀번호 또는 PII와 같은 민감한 데이터를 저장하는 데 적합하지 않습니다.
LocalStorage는 브라우저에 데이터를 저장할 수있는 브라우저 API입니다. 데이터는 사용자의 장치에 로컬로 저장되며 장치 나 브라우저에서 공유되지 않습니다. Remotestorage는 LocalStorage API를 원격 서버와 결합하여 브라우저 및 장치에서 데이터를 지속하는 라이브러리입니다.
Remotestorage는 인증없이 사용할 수 있지만 JWT (JSON Web Tokens)를 사용하여 서버에 대한 요청을 인증하는 것이 좋습니다. 이는 JWT_SECRET 환경 변수를 .env 에서 서버의 JWT 비밀로 설정하여 수행 할 수 있습니다. 자세한 내용은 서버 문서를 참조하십시오.
풀 요청은 항상 환영합니다. 급격한 변화를 제안하려면 먼저 논의 할 문제를 열어야합니다. 이렇게하면 작업을 시작하기 전에 PR이 수락되도록합니다.
아직 할당 된 기고자가없는 기존 문제의 경우 작업을 수행하려면이 문제에 대해 자유롭게 의견을 제시하십시오. 우리는 당신이 잘 맞다고 생각하면 문제를 당신에게 할당 할 것입니다.
변경 사항 : 버그 수정 또는 기능을 구현하고, 테스트를 작성하여이를 덮고 모든 테스트가 통과되고 있는지 확인하십시오. 커밋이 시맨틱 커밋 메시지를 활용하고 커밋 메시지가 기존 Commits 형식을 따라야합니다. 그런 다음 메인 브랜치에 풀 요청을 엽니 다.