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

Svelte에서 로컬 스토리지(local storage)를 사용하는 것은 가능합니다. 로컬 스토리지는 웹 브라우저의 기능으로, 웹 애플리케이션의 상태를 로컬에 저장할 수 있게 해줍니다. 이를 활용하여 Svelte 애플리케이션에서 데이터를 저장하고 로드할 수 있습니다.

로컬 스토리지를 사용하기 위해서는 먼저 localStorage 객체를 사용해야 합니다. 이 객체는 웹 브라우저에서 자바스크립트로 접근할 수 있는 전역 객체입니다. 로컬 스토리지에 데이터를 저장하려면 localStorage.setItem(key, value) 메서드를 사용하고, 데이터를 불러오려면 localStorage.getItem(key) 메서드를 사용합니다.

아래는 Svelte에서 로컬 스토리지를 사용하여 데이터를 저장하고 로드하는 간단한 예시입니다.

// App.svelte

<script>
  import { onMount } from 'svelte';

  let name = '';

  function saveData() {
    localStorage.setItem('name', name);
    alert('Data saved successfully!');
  }

  onMount(() => {
    let savedName = localStorage.getItem('name');
    if (savedName) {
      name = savedName;
    }
  });
</script>

<h1>Hello {name}!</h1>
<input type="text" bind:value={name}>
<button on:click={saveData}>Save</button>

이 예시에서는 name이라는 변수를 로컬 스토리지에 저장합니다. 브라우저를 새로고침하거나 애플리케이션을 재시작해도 저장된 데이터가 보존되어 입력한 이름이 계속 표시됩니다.

Svelte를 사용하면 로컬 스토리지를 쉽게 활용할 수 있습니다. 로컬 스토리지를 사용하여 간단한 상태 관리나 사용자 설정과 같은 데이터를 저장할 수 있습니다.

더 자세한 내용은 MDN 웹 문서를 참고하십시오.