#7 localStorage로 메모 저장하기

 

이번 단계에서는 새로고침해도 메모가 사라지지 않도록 localStorage를 사용했다.

이전까지는 메모를 memos 배열로 관리했다.

let memos = [];

메모를 추가하면 배열에 저장되고, 삭제하면 배열에서 제거되는 구조였다.

하지만 이 배열은 브라우저 메모리 안에만 존재한다.
그래서 페이지를 새로고침하면 JavaScript가 처음부터 다시 실행되고, memos 배열도 다시 빈 배열이 된다.

let memos = [];

즉, 이전 단계에서는 메모 추가와 삭제는 가능했지만 새로고침하면 모든 메모가 사라지는 문제가 있었다.

이번 단계에서는 이 문제를 해결하기 위해 localStorage를 사용했다.

 

localStorage란

localStorage는 브라우저에 데이터를 저장할 수 있는 공간이다.

간단히 말하면 브라우저 안에 있는 작은 저장소라고 볼 수 있다.
그래서 페이지를 새로고침해도 저장된 데이터가 유지된다.

다만 중요한 특징이 있다.

localStorage는 문자열만 저장할 수 있다.

현재 메모 하나는 객체 형태다.

const newMemo = {
    id: Date.now(),
    title: title,
    content: content
};

그리고 메모 목록은 이런 객체들이 들어 있는 배열이다.

[
    {
        id: 1,
        title: '첫 번째 메모',
        content: '내용 1'
    },
    {
        id: 2,
        title: '두 번째 메모',
        content: '내용 2'
    }
]

하지만 localStorage에는 배열이나 객체를 그대로 저장할 수 없다.
문자열로 바꿔서 저장해야 한다.

저장할 때는 JSON.stringify()를 사용한다.

JSON.stringify(memos)

반대로 다시 꺼낼 때는 문자열을 배열로 복원해야 한다.
이때는 JSON.parse()를 사용한다.

JSON.parse(savedMemos)

정리하면 흐름은 다음과 같다.

저장할 때:
배열 → JSON.stringify → 문자열 → localStorage

불러올 때:
localStorage 문자열 → JSON.parse → 배열

 

메모 저장 함수 만들기

먼저 현재 memos 배열을 localStorage에 저장하는 함수를 만들었다.

function saveMemos() {
    localStorage.setItem('memos', JSON.stringify(memos));
}

`localStorage.setItem()`은 데이터를 저장할 때 사용한다.

localStorage.setItem('memos', JSON.stringify(memos));

여기서 'memos'는 저장소에서 사용할 이름이다.
즉, 현재 메모 배열을 memos라는 이름으로 저장한다는 뜻이다.

`JSON.stringify(memos)`는 배열을 문자열로 바꿔준다.

결과적으로 saveMemos() 함수는 다음 역할을 한다.

현재 memos 배열을 문자열로 변환해서 localStorage에 저장한다.

 

saveMemos는 언제 호출해야 하나

saveMemos()는 memos 배열이 바뀐 직후에 호출해야 한다.

현재 memos 배열이 바뀌는 순간은 두 곳이다.

1. 메모 추가 후
2. 메모 삭제 후

메모를 추가할 때는 새 메모를 배열에 넣는다.

memos.push(newMemo);

그리고 그 직후 저장한다.

memos.push(newMemo);
saveMemos();
renderMemos();

메모를 삭제할 때는 filter()로 삭제할 메모를 제외한 새 배열을 만든다.

memos = memos.filter(function (item) {
    return item.id !== memo.id;
});

이때도 배열이 바뀌었으므로 바로 저장해야 한다.

memos = memos.filter(function (item) {
    return item.id !== memo.id;
});

saveMemos();
renderMemos();

즉, 흐름은 다음과 같다.

메모 추가
→ memos 배열 변경
→ saveMemos()
→ renderMemos()

메모 삭제
→ memos 배열 변경
→ saveMemos()
→ renderMemos()

배열만 바꾸고 saveMemos()를 호출하지 않으면 화면에서는 바뀐 것처럼 보이지만, 새로고침했을 때 이전 저장 상태로 돌아갈 수 있다.

 

메모 불러오기 함수 만들기

저장만 해서는 부족하다.
페이지가 다시 열렸을 때 저장된 메모를 불러와야 한다.

그래서 loadMemos() 함수를 만들었다.

function loadMemos() {
    const savedMemos = localStorage.getItem('memos');

    if (savedMemos !== null) {
        memos = JSON.parse(savedMemos);
    }
}

먼저 localStorage에서 memos라는 이름으로 저장된 값을 꺼낸다.

const savedMemos = localStorage.getItem('memos');

만약 저장된 값이 없다면 null이 나온다.

그래서 조건문으로 저장된 값이 있는지 확인한다.

if (savedMemos !== null) {
    memos = JSON.parse(savedMemos);
}

저장된 값이 있을 때만 `JSON.parse()`를 실행한다.
JSON.parse(savedMemos)는 문자열로 저장된 메모 데이터를 다시 배열로 바꿔준다.

그리고 그 배열을 다시 memos에 넣는다.

memos = JSON.parse(savedMemos);

결국 loadMemos()의 역할은 다음과 같다.

localStorage에서 저장된 메모를 꺼낸다.
저장된 메모가 있으면 배열로 복원한다.
복원한 배열을 memos에 넣는다.

 

처음 저장된 데이터가 없을 때

처음 페이지를 방문하면 localStorage에는 아직 저장된 메모가 없을 수 있다.

그 경우 다음 코드의 결과는 null이다.

const savedMemos = localStorage.getItem('memos');

그러면 조건문이 실행되지 않는다.

if (savedMemos !== null) {
    memos = JSON.parse(savedMemos);
}

이 경우 memos는 처음 선언한 빈 배열 그대로 유지된다.

let memos = [];

그리고 renderMemos()가 실행되면 빈 배열을 기준으로 화면을 그린다.

메모 없음
→ 메모 카드 생성 안 함
→ "아직 작성된 메모가 없습니다." 표시

그래서 처음 방문했을 때도 오류 없이 빈 메모장 화면이 나온다.

 

loadMemos 호출 위치

loadMemos()는 페이지가 처음 열릴 때 한 번만 실행하면 된다.

파일 맨 아래에서 다음 순서로 호출했다.

loadMemos();
renderMemos();

이 순서가 중요하다.

먼저 localStorage에서 저장된 메모를 불러와 memos 배열에 넣는다.
그다음 renderMemos()로 화면을 그린다.

만약 renderMemos()를 먼저 실행하면 아직 저장된 데이터가 memos 배열에 들어오기 전이므로, 화면에 저장된 메모가 보이지 않을 수 있다.

그래서 순서는 다음처럼 잡았다.

1. loadMemos()
2. renderMemos()

 

현재 코드 구조

현재 script.js의 핵심 구조는 다음과 같다.

let memos = [];

function saveMemos() {
    localStorage.setItem('memos', JSON.stringify(memos));
}

function loadMemos() {
    const savedMemos = localStorage.getItem('memos');

    if (savedMemos !== null) {
        memos = JSON.parse(savedMemos);
    }
}

function renderMemos() {
    // memos 배열을 기준으로 화면 다시 그리기
}

addMemoButton.addEventListener('click', function () {
    // 입력값 가져오기
    // 새 메모 객체 만들기

    memos.push(newMemo);
    saveMemos();
    renderMemos();

    // 입력창 비우기
});

loadMemos();
renderMemos();

전체 흐름 정리

이제 전체 흐름은 다음과 같다.

페이지가 처음 열릴 때

loadMemos()
→ localStorage에서 저장된 메모를 가져온다.
→ JSON.parse로 배열로 변환한다.
→ memos 배열에 넣는다.

renderMemos()
→ memos 배열을 기준으로 화면을 그린다.

메모를 추가할 때

사용자가 제목과 내용 입력
→ 메모 추가 버튼 클릭
→ newMemo 객체 생성
→ memos 배열에 추가
→ saveMemos()
→ renderMemos()
→ 입력창 비우기

메모를 삭제할 때

삭제 버튼 클릭
→ memos 배열에서 해당 메모 제거
→ saveMemos()
→ renderMemos()

이제 메모 추가와 삭제가 단순히 화면에만 반영되는 것이 아니라, localStorage에도 같이 반영된다.