자바스크립트 코드를 사용해 웹 스토리지를 다루는 방법을 알아보자.
로컬 스토리지와 세션 스토리지는 모두 Web Storage API를 따르며, 동일한 방식으로 사용할 수 있다.
이 API는 Storage 객체의 메서드인 getItem(), setItem(), removeItem() 등을 제공해 데이터를 쉽게 관리할 수 있다.
로컬 스토리지
▶ HTML 파일 예시
로컬 스토리지를 테스트하기 위해 다음과 같은 HTML 파일을 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 스토리지 테스트</title>
</head>
<body>
웹 스토리지 테스트
</body>
</html>
초반에 localStorage를 확인해보면 데이터가 저장되어있지 않는 것을 확인할 수 있다.
▶ 데이터 추가하기
localStorage.setItem(이름, 값)을 통해 데이터를 추가할 수 있다.
localStorage.setItem('language', 'korean');
▶ 데이터 가져오기
localStora데이터를 추가한 후, 해당 데이터를 가져오려면
localStorage.getItem(이름) 함수를 이용한다.
localStorage.getItem('language');
▶ 데이터 저장 시 자료형 변환
로컬 스토리지에 저장되는 데이터는 모두 문자열로 저장된다.
숫자, 불린 값 또는 객체를 저장하면 문자열로 변환된다.
localStorage.setItem('size', 100);
localStorage.getItem('size'); // "100"
localStorage.setItem('darkmode', true);
localStorage.getItem('darkmode'); // "true"자료형 변환을 위해 다음과 같이 캐스팅하면 된다.
Number(localStorage.getItem('size')); // 100
Boolean(localStorage.getItem('darkmode')); // true
▶ 객체 저장하기
객체나 배열을 저장하려면 문자열로 변환 후 저장해야한다.
이를 위해 JSON. stringify() 를 사용한다.
const preference = { language: 'korean', size: 100, darkmode: true };
localStorage.setItem('preference', JSON.stringify(preference));저장된 값을 객체로 변환하려면 JSON.parse()를 사용한다.
JSON.parse(localStorage.getItem('preference'));
▶ 데이터 변경하기
저장된 데이터를 변경하려면 동일한 키로 새로운 값을 설정하면 된다.
localStorage.setItem('language', 'english');
▶ 데이터 삭제하기
특정 데이터를 삭제하려면 removeItem() 메소드를 사용한다.
localStorage.removeItem('language');
▶ 데이터 삭제하기
로컬 스토리지의 모든 데이터를 삭제하려면 clear() 메소드를 사용한다.
localStorage.clear();
세션 스토리지
세션 스토리지는 Web Storage API를 따르기 때문에
로컬 스토리지와 동일한 방식으로 사용할 수 있다.
마찬가지로 setItem(), getItem(), removeItem(), clear() 등
로컬 스토리지랑 똑같은 함수를 사용하면 된다.
sessionStorage.setItem('language', 'korean');
sessionStorage.getItem('language');
sessionStorage.removeItem('language');
sessionStorage.clear();
'JS' 카테고리의 다른 글
| (1)~ (6) Web data storage - 쿠키, 웹 스토리지 정리 (0) | 2025.02.11 |
|---|---|
| (6) Web data storage - 테마 저장, 장바구니 구현하기 (0) | 2025.02.10 |
| (4) Web data storage - 웹 스토리지 (0) | 2025.02.07 |
| (3) Web data storage - 쿠키 (Cookie) 다루는 함수 만들기 (0) | 2025.02.06 |
| (2) Web data storage - 쿠키 (Cookie) 추가/수정/삭제 (0) | 2025.02.06 |