어댑터

localStorage 어댑터

클라이언트 사이드 스토어 — 서버 없이 브라우저에서 피드백 루프 전체를 실행합니다.

@instafix/adapter-localstorage는 방문자의 브라우저에 피드백을 저장합니다. 위젯의 store 옵션과 함께 사용하면 백엔드가 전혀 없이도 완전히 동작하는 피드백 루프를 만들 수 있습니다 — 데모, 프로토타입, 문서 사이트(이 사이트도 사용 중입니다)에 이상적입니다.

npm install github:gnoopy/instafix#adapter-localstorage-dist
import { initInstaFix } from "@instafix/widget";
import { LocalStorageStore } from "@instafix/adapter-localstorage";

initInstaFix({
  store: new LocalStorageStore(),
  projectName: "my-demo",
});

옵션

옵션타입기본값하는 일
keystring"instafix_feedbacks"전체 피드백 배열을 담는 단일 localStorage 키

동작 방식

  • 데이터는 한 기기에만 남습니다. 각 방문자는 오직 자신의 피드백만 볼 수 있습니다 — 의도된 설계입니다. 데이터는 브라우저 밖으로 나가지 않습니다.
  • 손상된 데이터로 인해 크래시가 나지 않습니다. 저장된 JSON을 파싱할 수 없으면 읽기는 빈 목록을 반환합니다. 단, 이후 쓰기가 성공하면 손상된 데이터는 그대로 덮어써집니다.
  • 용량 압박 시 스크린샷부터 제외합니다. 쓰기 작업이 브라우저의 저장 용량 한도(원본당 약 5MB)를 초과하면, 어댑터는 스크린샷을 뺀 채로 한 번 더 시도한 뒤에야 StorePersistenceError와 함께 포기합니다 — 이미지는 저장하지 못해도 코멘트는 살아남습니다.
  • 날짜는 왕복 과정에서도 유지됩니다createdAt을 비롯한 날짜 필드는 문자열이 아니라 실제 Date 객체로 돌아옵니다.
  • 중요한 경로에서는 SSR 안전성이 보장됩니다. 읽기와 쓰기는 localStorage가 없을 때 우아하게 성능이 저하됩니다(graceful degradation). 유일한 예외는 clear()로, 브라우저 환경을 전제로 하므로 클라이언트 사이드에서만 호출해야 합니다.
  • 다른 모든 어댑터와 마찬가지로, clientId가 중복된 제출은 기존 레코드를 반환합니다.
GitHub에서 수정

이 페이지의 목차