[javascript] Svelte에서 로컬 스토리지(local storage)를 사용할 수 있나요?

로컬 스토리지에 데이터를 저장하려면, 먼저 localStorage 객체를 사용하여 로컬 스토리지에 접근해야 합니다.

다음은 Svelte에서 로컬 스토리지를 사용하는 간단한 예제입니다:

import { onMount } from 'svelte';

let count = 0;

// 컴포넌트가 마운트 될 때 로컬 스토리지로부터 데이터를 가져옵니다.
onMount(() => {
  const storedCount = localStorage.getItem('count');
  if (storedCount) {
    count = parseInt(storedCount);
  }
});

// 카운트 값을 증가시키고 로컬 스토리지에 저장합니다.
function increment() {
  count += 1;
  localStorage.setItem('count', count.toString());
}

위의 예제에서는 localStorage 객체의 getItem 메소드를 사용하여 로컬 스토리지에서 ‘count’라는 키에 저장된 값을 가져옵니다. 마운트될 때, 만약 로컬 스토리지에 ‘count’ 키의 값이 존재한다면, 해당 값을 가져와서 count 변수에 할당합니다.

또한, increment 함수에서 카운트 값을 증가시킨 후 setItem 메소드를 사용하여 업데이트된 카운트 값을 ‘count’ 키에 저장합니다.

로컬 스토리지를 사용하여 데이터를 관리할 수 있기 때문에, Svelte 애플리케이션에서 사용자의 상태를 유지하거나 설정 옵션을 저장하는 등 다양한 용도로 활용할 수 있습니다.

더 자세한 내용은 MDN 웹 문서를 참조하시기 바랍니다.