2025 / 02 / 14

오늘 수업 시간에는 로컬 스토리지에 대해 배웠습니다.
작성한 내용이 사용자의 브라우저에 그대로 남아 있을 수 있도록 하는 기능입니다.
프로젝트에 직접 활용하는 것은 어려웠지만 기본 개념을 이해하는 건 괜찮았습니다.

---

💌 로컬 스토리지

웹 브라우저에서 제공하는 저장소입니다.
이 저장소는 클라이언트(사용자의 브라우저)에서 데이터를 저장할 수 있게 해줍니다.
서버에 저장되지 않고, 사용자 컴퓨터의 브라우저에 저장됩니다.

1) 목적

데이터를 로컬(사용자의 컴퓨터)에 저장해 두고, 페이지를 새로고침해도 데이터가 유지되게끔 하는 기능입니다.

---

2) 용도

로그인 상태 유지, 사용자의 설정 기억하기, 오프라인 웹 애플리케이션 구현 등

---

3) 특징

로컬스토리지

• 데이터가 영구적으로 저장됩니다.
• 페이지를 새로 고침하거나 브라우저를 종료해도 데이터가 사라지지 않습니다.
• 도메인 단위로 데이터를 저장합니다. (즉, 동일한 도메인에서만 접근 가능)

---

💌 사용 방법

로컬 스토리지에 데이터를 저장하고 불러오는 방법을 실제 코드로 확인해보겠습니다.

1) 데이터 저장하기

• 데이터를 저장하는 방법은 localStorage.setItem( ) 메서드를 사용하는 것입니다.
• 'username'은 키(Key), 'jinha'는 값(Value)입니다.
• 키-값 형태로 데이터를 저장할 수 있습니다.

localStorage.setItem('username', 'jinha');

---

2) 데이터 읽어오기

• 저장된 데이터를 불러올 때는 localStorage.getItem( ) 메서드를 사용합니다.
• getItem( ) 메서드는 해당 키에 저장된 값을 반환합니다.
• 코드를 실행하면 jinha라는 값이 출력됩니다.
• 만약 키가 없다면 null을 반환합니다.

let username = localStorage.getItem('username');
console.log(username); // jinha

---

3) 데이터 삭제하기

• 저장된 데이터를 삭제하려면 localStorage.removeItem( ) 메서드를 사용합니다.
• 코드를 실행하면 'username' 키에 해당하는 데이터가 삭제됩니다.

localStorage.removeItem('username');

---

4) 모든 데이터 삭제하기

• 모든 데이터를 한 번에 삭제하려면 localStorage.clear( )를 사용합니다.
• 이 코드는 로컬스토리지에 저장된 모든 키-값 쌍을 삭제합니다.

localStorage.clear();

---

💌 로컬 스토리지 특징

• 로컬 스토리지에 저장할 수 있는 데이터는 문자열(String) 뿐 입니다.
• 숫자, 객체, 배열 등을 저장하려면 문자열로 변환해야 합니다.

1) 숫자 저장하기

• 숫자를 저장하려면 toString( )을 사용해서 문자열로 변환해줍니다.

let age = 23;
localStorage.setItem('age', age.toString()); // 숫자는 문자열로 변환해서 저장

---

2) 객체 & 배열 저장하기

• 객체나 배열을 저장하려면 JSON 형식으로 변환해야 합니다.
• 문자열로 변환하기 위해 JSON.stringify( )를 사용합니다.
• JSON은 데이터를 문자열로 변환하는 형식입니다.

// 객체를 저장
let user = { name: 'jinha', age: 23 };

// 객체를 JSON 문자열로 변환해서 저장
localStorage.setItem('user', JSON.stringify(user)); 

// 배열을 저장
let fruits = ['사과', '바나나', '체리'];

// 배열도 JSON 문자열로 변환해서 저장
localStorage.setItem('fruits', JSON.stringify(fruits)); 

---

3) 객체 & 배열 불러오기

• 저장된 JSON 문자열을 다시 객체나 배열로 변환하여 사용합니다.
• 객체나 배열로 변환하기 위해 JSON.parse( ) 메서드를 사용합니다.

let user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // jinha

let fruits = JSON.parse(localStorage.getItem('fruits'));
console.log(fruits); // ['사과', '바나나', '체리']

---

💌 한계점

로컬 스토리지의 한계점

1) 용량 제한

• 로컬 스토리지는 각 도메인별로 약 5MB 정도의 저장 용량 제한이 있습니다.
• 너무 많은 데이터를 저장하려고 하면 용량 초과 오류가 발생할 수 있습니다.

2) 보안

• 로컬 스토리지는 클라이언트 측에 데이터를 저장하므로 보안에 취약할 수 있습니다.
• 중요한 정보를 로컬스토리지에 저장하는 것은 피해야 합니다.
• 예를 들어, 비밀번호나 개인정보는 저장하지 않는 것이 좋습니다.

3) 동기적

• localStorage는 동기적 방식으로 작동합니다.
• 데이터를 저장하거나 불러올 때 페이지가 잠시 멈출 수 있습니다.
• 대용량 데이터를 다룰 때 성능에 영향을 줄 수 있습니다.

---

28일차 후기

• 로컬스토리지에 대한 개념을 배우지 않고 투두 리스트에 적용했을 때는 좀 어려웠는데, 이번에 설명을 듣고 사용해보니 조금은 괜찮아진 것 같습니다.
• 뭔가 어려운 듯, 안어려운 듯 이해되는거 같긴합니다.
• GitHub 링크 배포할 때 썸네일을 확인하지 않아.. 곤란한 상황도 발생했습니다..
• 최애가 부끄러운 건 아니지만.. 사진이 너무 크더라구요ㅠㅠ ˭̡̞(◞˃ᆺ˂)◞ ₎₎=͟͟͞͞˳˚॰°ₒ৹๐