JavaScript - Storage API: 초보자 가이드
안녕하세요, 미래의 코딩 슈퍼스타 여러분! ? 오늘 우리는 JavaScript의 Storage API 세계로 접수합니다. 코드를 한 줄도 작성한 적이 없더라도 걱정하지 마세요 - 이 흥미로운 여정에서 여러분의 친절한 안내자가 되겠습니다. 시작해 보겠습니다!
Web Storage API는 무엇인가요?
마법의 노트북을 가지고 있다고 상상해 보세요. 그 노트북이 여러분이 닫은 후에도 것들을 기억할 수 있다면? 그게 바로 Web Storage API가 웹 사이트에서 하는 일입니다! 웹 애플리케이션이 브라우저에 직접 데이터를 저장할 수 있는 방법입니다.
이렇게 생각해 보세요: 웹 사이트에서 게임을 하고 있으며, 진행 상황을 저장하고 싶습니다. Web Storage API를 사용하면 게임이 여러분의 점수를 기억하고, 브라우저를 닫고 나중에 돌아왔을 때도 그 점수를 유지할 수 있습니다. 멋지죠?
웹 저장소에는 두 가지 주요 유형이 있습니다:
- localStorage
- sessionStorage
이 두 가지를 자세히 탐구해 보겠습니다.
Window localStorage 객체
localStorage는 무엇인가요?
localStorage는 여러분의 웹 애플리케이션에 대한 지속적인 저장고입니다. 브라우저를 닫은 후에도 데이터를 유지하므로 장기 저장에 적합합니다.
localStorage를 어떻게 사용하나요?
localStorage를 사용하는 간단한 예제를 보여드리겠습니다:
// 데이터 저장
localStorage.setItem("username", "CoolCoder123");
// 데이터检索
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // 출력: CoolCoder123
// 데이터 제거
localStorage.removeItem("username");
// 모든 데이터 지우기
localStorage.clear();이 예제에서 우리는 사용자 이름을 저장하고,检索하고, 제거하고, 모든 데이터를 지우는 과정을 보여드렸습니다. 마법의 노트북에 쓰고, 읽고, 특정 노트를 지우고, 전체 노트북을 지우는 것과 같은 것입니다!
Window sessionStorage 객체
sessionStorage는 무엇인가요?
sessionStorage는 localStorage의 잊어버리는 cousin입니다. 단일 세션 동안 데이터를 저장합니다. 브라우저 탭을 닫으면, 푸uff! 데이터가 사라집니다.
sessionStorage를 어떻게 사용하나요?
sessionStorage를 사용하는 것은 localStorage와 매우 유사합니다:
// 데이터 저장
sessionStorage.setItem("tempScore", "1000");
// 데이터检索
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // 출력: 1000
// 데이터 제거
sessionStorage.removeItem("tempScore");
// 모든 데이터 지우기
sessionStorage.clear();이는 활동 중인 플레이어가 필요한 게임 점수와 같은 일시적인 정보를 저장하는 데 매우 유용합니다.
Cookie vs localStorage vs sessionStorage
이제 이 저장소 방법을 재미있는 비유를 사용하여 비교해 보겠습니다:
- Cookies는 풀립니다. 작기고, 서버에서 읽을 수 있으며, 만료 날짜가 있습니다.
- localStorage는 개인 일기입니다. 많은 정보를 저장하고 오랫동안 보관합니다.
- sessionStorage는 화이트보드입니다. 일시적으로 정보를 유지하고 완료되면 지워집니다.
다음은 편리한 비교 표입니다:
| 기능 | Cookies | localStorage | sessionStorage |
|---|---|---|---|
| 용량 | ~4KB | ~5MB | ~5MB |
| 만료 | 수동 설정 | 결코 | 탭 닫기 |
| 서버 접근 | 예 | 아니요 | 아니요 |
| 요청과 함께 전송 | 예 | 아니요 | 아니요 |
저장소 객체 프로퍼티와 메서드
localStorage와 sessionStorage는 동일한 메서드와 프로퍼티를 공유합니다. 이를 탐구해 보겠습니다:
프로퍼티
-
length: 저장된 항목의 수를 반환합니다.
console.log(localStorage.length);메서드
-
setItem(key, value): 저장소에 키/값 쌍을 추가합니다. -
getItem(key): 주어진 키와 관련된 값을检索합니다. -
removeItem(key): 주어진 키와 관련된 항목을 제거합니다. -
clear(): 저장소에서 모든 항목을 제거합니다. -
key(index): 지정된 인덱스의 키 이름을 반환합니다.
다음은 모든 메서드를 사용하는 예제입니다:
// setItem 사용
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");
// getItem 사용
console.log(localStorage.getItem("fruit")); // 출력: apple
// key 사용
console.log(localStorage.key(0)); // 출력: fruit (또는 vegetable, 순서 보장되지 않음)
// length 사용
console.log(localStorage.length); // 출력: 2
// removeItem 사용
localStorage.removeItem("vegetable");
// clear 사용
localStorage.clear();이제 웹 저장소의 세계로的第一步을 내디디셨습니다. 연습이 완벽을 만듭니다. 간단한 웹 페이지를 만들고 이 저장소 방법을 실험해 보세요. localStorage를 사용하여 플레이어의 최고 점수를 기억하는 작은 게임을 만들어 보세요?
마지막으로, 작은 코딩 장난을 드리겠습니다:
왜 프로그래머는 다크 모드를 좋아하나요? 빛이 벌레를吸引了! ??
행복하게 코딩하세요, 기억하시오 - 모든 전문가는 초보자였다. 계속 배우고, 계속 코딩하고, 가장 중요한 것은 즐기세요!
Credits: Image by storyset