2025-01-26T02:15:33

doc/13_Storage_API.md

@@ -0,0 +1,73 @@
+# 웹 스토리지(Web Storage) API
+
+localStorage와 sessionStorage는 웹 스토리지(Web Storage) API의 두 가지 주요 객체로, 브라우저에 데이터를 저장하는 데 사용됩니다.
+둘 다 키-값(key-value) 쌍으로 데이터를 저장하며, 데이터를 브라우저에 클라이언트 측에 영구적으로 저장하거나 일시적으로 저장할 수 있도록 합니다.
+
+## localStorage와 sessionStorage의 공통점
+
+* 키-값 기반 저장
+    - 데이터를 문자열 형태로 저장.
+    - 저장 시 데이터를 자동으로 문자열로 변환.
+    - 숫자, 객체 등도 저장할 수 있지만 문자열로 변환하여 저장해야 합니다.
+* 동기적(Synchronous) 동작
+    - 저장 및 읽기 작업은 동기적으로 처리됩니다.
+* 브라우저 한정
+    - 데이터는 브라우저에 저장되며, 브라우저 간 공유되지 않습니다.
+* 인터페이스
+    - setItem(key, value): 데이터를 저장.
+    - getItem(key): 데이터를 읽음.
+    - removeItem(key): 특정 데이터를 삭제.
+    - clear(): 저장된 모든 데이터를 삭제.
+    - key(index): 인덱스로 키를 가져옴.
+    - length: 저장된 항목 수 반환.
+
+## 차이점
+* 데이터 지속성	
+    - localStorage: 데이터를 영구적으로 저장하며, 브라우저를 닫아도 유지됨.	
+    - sessionStorage: 데이터를 일시적으로 저장하며, 브라우저 탭이나 창을 닫으면 사라짐.
+* 탭/창 간 공유	
+    - localStorage: 동일한 출처(origin)에서는 브라우저의 모든 탭에서 데이터 공유.	
+    - sessionStorage: 동일한 출처(origin)이라도 각 탭/창에서 데이터가 독립적.
+* 사용 사례	
+    - localStorage: 사용자 설정, 즐겨찾기, 쇼핑 카트 등의 영구 데이터 저장.	
+    - sessionStorage: 임시 데이터, 폼 입력값, 특정 세션 데이터 관리.
+
+```javascript
+// 데이터 저장
+localStorage.setItem("username", "philosopher");
+localStorage.setItem("age", 30);
+
+sessionStorage.setItem("sessionId", "abc123");
+```
+
+```javascript
+// 데이터 읽기
+const username = localStorage.getItem("username");
+console.log(username); // "philosopher"
+
+const sessionId = sessionStorage.getItem("sessionId");
+console.log(sessionId); // "abc123"
+```
+
+```javascript
+// 데이터 삭제
+localStorage.removeItem("username");
+
+sessionStorage.removeItem("sessionId");
+```
+
+```javascript
+// 모든 데이터 삭제
+localStorage.clear();
+
+sessionStorage.clear();
+```
+
+```javascript
+// 저장된 키와 값 확인
+for (let i = 0; i < localStorage.length; i++) {
+  const key = localStorage.key(i);
+  const value = localStorage.getItem(key);
+  console.log(`${key}: ${value}`);
+}
+```