본문으로 건너뛰기

함수: localStorageCollectionOptions()

호출 시그니처​

function localStorageCollectionOptions<T, TKey>(config): CollectionConfig<InferSchemaOutput<T>, TKey, T, LocalStorageCollectionUtils> & object;

정의 위치: packages/db/src/local-storage.ts:318

표준 Collection과 함께 사용할 localStorage 컬렉션 옵션을 생성합니다

이 함수는 데이터를 localStorage/sessionStorage에 영속화하고 스토리지 이벤트를 사용하여 브라우저 탭 간 변경 사항을 동기화하는 컬렉션을 생성합니다.

대체 동작:

localStorage를 사용할 수 없는 경우(예: 서버 측 렌더링 환경), 이 함수는 자동으로 인메모리 스토리지 구현으로 대체됩니다. 이를 통해 모듈 초기화 중 오류를 방지하고 어떤 환경에서도 컬렉션이 작동하도록 합니다. 단, 인메모리 대체 구현을 사용하면 페이지 새로 고침 후에도 데이터가 유지되지 않으며 탭 간에 공유되지 않습니다.

수동 트랜잭션에서 사용:

수동 트랜잭션에서는 utils.acceptMutations()을 트랜잭션의 mutationFn에서 호출해야 tx.mutate() 중에 적용한 변경 사항이 영속화됩니다. 로컬 스토리지 컬렉션은 수동 트랜잭션의 표준 뮤테이션 핸들러 흐름에 참여하지 않으므로 이 호출이 필요합니다.

타입 매개변수​

T​

T extends StandardSchemaV1&lt;unknown, unknown>

TKey​

TKey extends string | number = string | number

매개변수​

config​

LocalStorageCollectionConfig&lt;InferSchemaOutput&lt;T>, T, TKey> & object

localStorage 컬렉션의 구성 옵션입니다

반환값​

CollectionConfig&lt;InferSchemaOutput&lt;T>, TKey, T, LocalStorageCollectionUtils> & object

clearStorage, getStorageSize, acceptMutations를 포함한 유틸리티가 있는 컬렉션 옵션입니다

예시​

// Basic localStorage collection
const collection = createCollection(
  localStorageCollectionOptions({
    storageKey: 'todos',
    getKey: (item) => item.id,
  })
)
// localStorage collection with custom storage
const collection = createCollection(
  localStorageCollectionOptions({
    storageKey: 'todos',
    storage: window.sessionStorage, // Use sessionStorage instead
    getKey: (item) => item.id,
  })
)
// localStorage collection with mutation handlers
const collection = createCollection(
  localStorageCollectionOptions({
    storageKey: 'todos',
    getKey: (item) => item.id,
    onInsert: async ({ transaction }) => {
      console.log('Item inserted:', transaction.mutations[0].modified)
    },
  })
)
// Using with manual transactions
const localSettings = createCollection(
  localStorageCollectionOptions({
    storageKey: 'user-settings',
    getKey: (item) => item.id,
  })
)

const tx = createTransaction({
  mutationFn: async ({ transaction }) => {
    // Use settings data in API call
    const settingsMutations = transaction.mutations.filter(m => m.collection === localSettings)
    await api.updateUserProfile({ settings: settingsMutations[0]?.modified })

    // Persist local-storage mutations after API success
    localSettings.utils.acceptMutations(transaction)
  }
})

tx.mutate(() => {
  localSettings.insert({ id: 'theme', value: 'dark' })
  apiCollection.insert({ id: 2, data: 'profile data' })
})

await tx.commit()

호출 시그니처​

function localStorageCollectionOptions<T, TKey>(config): CollectionConfig<T, TKey, never, LocalStorageCollectionUtils> & object;

정의 위치: packages/db/src/local-storage.ts:338

표준 Collection과 함께 사용할 localStorage 컬렉션 옵션을 생성합니다

이 함수는 데이터를 localStorage/sessionStorage에 영속화하고 스토리지 이벤트를 사용하여 브라우저 탭 간 변경 사항을 동기화하는 컬렉션을 생성합니다.

대체 동작:

localStorage를 사용할 수 없는 경우(예: 서버 측 렌더링 환경), 이 함수는 자동으로 인메모리 스토리지 구현으로 대체됩니다. 이를 통해 모듈 초기화 중 오류를 방지하고 어떤 환경에서도 컬렉션이 작동하도록 합니다. 단, 인메모리 대체 구현을 사용하면 페이지 새로 고침 후에도 데이터가 유지되지 않으며 탭 간에 공유되지 않습니다.

수동 트랜잭션에서 사용:

수동 트랜잭션에서는 utils.acceptMutations()을 트랜잭션의 mutationFn에서 호출해야 tx.mutate() 중에 적용한 변경 사항이 영속화됩니다. 로컬 스토리지 컬렉션은 수동 트랜잭션의 표준 뮤테이션 핸들러 흐름에 참여하지 않으므로 이 호출이 필요합니다.

타입 매개변수​

T​

T extends object

TKey​

TKey extends string | number = string | number

매개변수​

config​

LocalStorageCollectionConfig&lt;T, never, TKey> & object

localStorage 컬렉션의 구성 옵션입니다

반환값​

CollectionConfig&lt;T, TKey, never, LocalStorageCollectionUtils> & object

clearStorage, getStorageSize, acceptMutations를 포함한 유틸리티가 있는 컬렉션 옵션입니다

예시​

// Basic localStorage collection
const collection = createCollection(
  localStorageCollectionOptions({
    storageKey: 'todos',
    getKey: (item) => item.id,
  })
)
// localStorage collection with custom storage
const collection = createCollection(
  localStorageCollectionOptions({
    storageKey: 'todos',
    storage: window.sessionStorage, // Use sessionStorage instead
    getKey: (item) => item.id,
  })
)
// localStorage collection with mutation handlers
const collection = createCollection(
  localStorageCollectionOptions({
    storageKey: 'todos',
    getKey: (item) => item.id,
    onInsert: async ({ transaction }) => {
      console.log('Item inserted:', transaction.mutations[0].modified)
    },
  })
)
// Using with manual transactions
const localSettings = createCollection(
  localStorageCollectionOptions({
    storageKey: 'user-settings',
    getKey: (item) => item.id,
  })
)

const tx = createTransaction({
  mutationFn: async ({ transaction }) => {
    // Use settings data in API call
    const settingsMutations = transaction.mutations.filter(m => m.collection === localSettings)
    await api.updateUserProfile({ settings: settingsMutations[0]?.modified })

    // Persist local-storage mutations after API success
    localSettings.utils.acceptMutations(transaction)
  }
})

tx.mutate(() => {
  localSettings.insert({ id: 'theme', value: 'dark' })
  apiCollection.insert({ id: 2, data: 'profile data' })
})

await tx.commit()