[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 웹 문서를 참고하십시오.