[Svlete]스토어 데이터 세션 스토리지(sessionStorage)에 저장

스토어 데이터 세션 스토리지에 저장

Svelte의 스토어는 서로 관계없는 컴포넌트 간에 데이터를 공유할 수 있다는 장점이 존재하지만, 웹 페이지를 새로고침 하면 스토어의 모든 데이터가 소실됩니다.

 

다음은 스토어 numValue의 데이터를 변경하는 과정을 보여줍니다. 새로고침 버튼을 클릭하면 스토어 numValue의 데이터가 유지되지 않고 초깃값 1로 설정됩니다.

따라서, 웹 페이지를 새로고침 했을 때마다 스토어의 데이터를 유지할 필요가 있습니다. 스토어의 데이터를 유지하기 위해 JavaScript에서 제공하는 세션 스토리지(sessionStorage)를 사용합니다.

---

세션 스토리지

세션 스토리지는 현재 브라우저에 데이터를 저장할 수 있는 웹 스토리지입니다. 새로고침 후에도 세션 스토리지에 등록된 데이터가 유지되며, 브라우저를 닫으면 세션 스토리지에 등록된 모든 데이터가 사라집니다.

 

세션 스토리지의 데이터는 키/값 쌍으로 등록됩니다.

 

이번 포스팅은 세션 스토리지에서 제공하는 다음 두 가지 함수를 사용합니다.

 

setItem(key, value)

- 세션 스토리지에 키/값 쌍으로 데이터를 등록합니다.

- 키가 이미 존재하는 경우 값을 갱신합니다.

 

getItem(key)

- 키에 해당하는 값을 가져옵니다.

---

스토어 구현

세션 스토리지에 키를 'numValue'로 설정하고 값은 스토어 numValue의 데이터로 설정합니다.

 

다음 소스 코드는 세션 스토리지에 데이터를 등록하는 로직이 구현되지 않은 스토어입니다.

 

[스토어 - ExampleStore.js]

import {writable} from 'svelte/store'

const {subscribe, update} = writable(1);

export const numValue = {
  subscribe,
  doubleCalc: () => update(num => {
    let result = num * 2;
    return result;
  })
};

세션 스토리지에 값을 가져오는 로직을 구현합니다. 세션 스토리지의 getItem() 함수는 인자로 전달된 키에 해당하는 값이 없는 경우 null을 반환합니다.

 

따라서, getItem() 함수의 반환 값이 null인 경우 세션 스토리지에 데이터가 등록되지 않았다는 의미이므로 초깃값 1로 설정합니다.

import {writable} from 'svelte/store'

// 세션 스토리지에서 키 'numValue'로 설정된 값을 가져옴
const sessionNumValue = () => sessionStorage.getItem('numValue');

// sessionNumValue() 함수의 결과가 null인 경우 1로 설정
const {subscribe, update} = writable(sessionNumValue() || 1);

export const numValue = {
  subscribe,
  doubleCalc: () => update(num => {
    let result = num * 2;
    return result;
  })
};

다음으로 스토어의 데이터가 변경되면, 세션 스토리지에 키 'numValue'로 설정된 값을 갱신해야합니다. setItem() 함수를 사용하여 키 'numValue'에 해당하는 값을 등록 및 갱신합니다.

import {writable} from 'svelte/store'

// 세션 스토리지에서 키 'numValue'로 설정된 값을 가져옴
const sessionNumValue = () => sessionStorage.getItem('numValue');

// sessionNumValue() 함수의 결과가 null인 경우 1로 설정
const {subscribe, update} = writable(sessionNumValue() || 1);

export const numValue = {
  subscribe,
  doubleCalc: () => update(num => {
    let result = num * 2;
    // doubleCalc() 함수가 호출되면 세션 스토리지에 등록된 값을 갱신함
    sessionStorage.setItem('numValue', result);
    return result;
  })
};

 

다음 소스 코드는 ExampleStore.js 파일의 스토어 numValue를 구독하는 App.svelte 파일입니다.

 

[컴포넌트 - App.svelte]

<script>
  import { numValue } from './ExampleStore.js';
</script>

<div>
  <button on:click={() => numValue.doubleCalc()}>numValue x 2</button>
  <p>numValue: {$numValue}</p>
</div>

[실행 결과]

새로고침 버튼을 클릭해도 스토어의 값이 유지되는 것을 확인할 수 있습니다.