안녕하세요 웹파트 YB 한수정입니다!
2주 차 실습과 과제를 하면서 로컬스토리지에 대해 찾아보게 되었고 그러면서 새롭게 세션스토리지도 있다는 걸 알게 되어 이 두 가지 개념에 대해 공유 과제를 작성하게 되었습니다.
로컬스토리지(LocalStorage)
로컬스토리지는 사용자의 브라우저에 데이터를 영구적으로 저장하는 공간입니다. 페이지를 닫거나 브라우저를 종료해도 데이터가 사라지지 않고 남아 있으며, 사용자가 직접 삭제하거나 브라우저의 캐시를 지우기 전까지 유지됩니다.
// 로컬스토리지에 'test'라는 키로 1을 저장한다
localStorage.setItem('test', 1);
// 브라우저를 닫았다가 다시 열어도 이 코드를 실행하면 '1'을 출력한다
alert(localStorage.getItem('test'));
위 코드와 같이 로컬스토리지는 오리진(domain/port/protocol)이 같은 웹페이지 간에 데이터를 공유합니다. 따라서 한 페이지에서 저장한 데이터는 같은 오리진의 다른 페이지에서도 볼 수 있습니다.
예제
- 로컬스토리지에 데이터 저장하기
// 'username'이라는 키에 'Soojeong'이라는 값을 저장한다
localStorage.setItem('username', 'Soojeong');- 로컬스토리지에서 데이터 읽기
// 'username'이라는 키의 값을 불러온다
const username = localStorage.getItem('username');
// 콘솔로 확인하면 'Soojoeng'이 출력된다
console.log(username);- 로컬스토리지에서 데이터 삭제하기
// 'username'이라는 키를 삭제한다
localStorage.removeItem('username');- 로컬스토리지의 모든 데이터 삭제하기
// 로컬스토리지의 모든 데이터를 삭제한다
localStorage.clear();- 문자열로 데이터를 저장하기
로컬스토리지는 문자열 형태로 데이터를 저장합니다. 객체나 배열을 저장하기 위해서는 JSON 형식으로 변환해주어야 합니다. 숫자나 객체를 저장하려면 문자열로 변환(JSON.stringify) 후 저장하고, 불러올 때는 다시 객체로 변환(JSON.parse)해야 합니다.
// 객체를 로컬스토리지에 저장한다
const fluffyKitty = { catName: 'Bamsik', birthDate: 20220417 };
localStorage.setItem('fluffyKittyData', JSON.stringify(fluffyKitty));
// 저장된 객체 불러온다
const storedKitty = JSON.parse(localStorage.getItem('fluffyKittyData'));
console.log(storedKitty.catName);
console.log(storedKitty.birthDate);
<!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>
<h1 id="greeting"></h1>
<input type="text" id="nameInput" placeholder="이름을 입력하세요">
<button id="saveButton">저장</button>
<script src="script.js"></script>
</body>
</html>// script.js
// 페이지 로드 시 로컬스토리지에서 'name'을 불러온다
const storedName = localStorage.getItem('name');
const greeting = document.getElementById('greeting');
if (storedName) {
greeting.textContent = `${storedName}님, 어서오세요`;
} else {
greeting.textContent = '이름을 입력하세요.';
}
// 입력한 이름을 저장하는 기능을 한다
document.getElementById('saveButton').addEventListener('click', () => {
const name = document.getElementById('nameInput').value;
localStorage.setItem('name', name);
greeting.textContent = `${name}님, 어서오세요`;
});세션스토리지(SessionStrorage)
세션스토리지는 웹 페이지 세션 동안만 데이터를 저장하는 공간입니다. 페이지를 닫거나 브라우저를 종료하면 데이터가 사라집니다. 즉, 세션 동안만 데이터가 유효하며, 같은 탭에서만 유지됩니다. 새 탭을 열면 새로운 세션이 시작되기 때문에 해당 탭에서는 이전에 저장된 데이터를 사용할 수 없습니다.
예제
로컬스토리지와 코드는 유사해 간단히 작성하겠습니다.
// 'username'이라는 키에 'Soojeong'이라는 값을 저장한다
sessionStorage.setItem('username', 'Soojeong');
// 'username'이라는 키의 값을 불러온다
const username = sessionStorage.getItem('username');
console.log(username); // 'Soojeong' 출력
// 'username'이라는 키의 데이터를 삭제한다
sessionStorage.removeItem('username');
// 객체를 세션스토리지에 저장한다
const user = { name: 'Soojeong', age: 23 };
sessionStorage.setItem('user', JSON.stringify(user));
// 저장된 객체 불러오기
const storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser.name); // 'Soojeong' 출력
console.log(storedUser.age); // 23 출력
// 세션스토리지의 모든 데이터를 삭제한다
sessionStorage.clear();
로컬스토리지와 세션스토리지
공통점
- 모두 개발자도구에서 확인이 가능하다.
- 키와 값은 반드시 문자열이어야 한다.
- 저장할 수 있는 데이터의 용량은 브라우저에 따라 다르지만, 일반적으로 5MB 이상의 제한이 있다.
- 사용자가 직접 삭제하지 않는 한 파기되지 않는다.
- 동일한 오리진(도메인, 포트, 프로토콜)에 묶여있다.
차이점
| 로컬스토리지 | 세션스토리지 |
| 오리진이 같은 모든 탭 창 전체에서 공유된다. | 오리진이 같은 탭과 해당 탭에서 열린 iframe에서 공유된다. |
| 브라우저를 껐다 켜도 남아있다. | 페이지를 새로고침해도 남아있다. 하지만 탭이나 브라우저를 종료하면 사라진다. |
iframe이란?
iframe은 inline frame의 약자로, HTML 문서 내에 또 다른 HTML 문서를 삽입할 수 있는 요소입니다. 한 웹페이지 안에 다른 웹페이지를 불러와서 표시할 수 있으며, 보통 유튜브 동영상이나 외부 지도 같은 콘텐츠를 페이지에 임베드할 때 많이 사용됩니다.
로컬스토리지와 세션스토리지에 대해 찾아보다보니 쿠키에 대한 개념이 있어서 추가로 정리해보려고 합니다.
쿠키
쿠키(Cookie)는 웹 브라우저가 사용자에 대한 정보를 저장하는 작은 데이터 파일로 주로 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용됩니다. 쿠키는 최대 4KB의 용량을 가진 매우 작은 양의 데이터이고 문자열만 저장할 수 있다는 제한이 있습니다.
- Session cookie
만료일을 포함하지 않습니다. 대신에 브라우저나 탭이 열려있는 동안에만 저장됩니다. 브라우저가 닫히면 cookie는 영구적으로 삭제됩니다. 이것은 은행 웹사이트 내에서 작업을 하고 있다가 탭을 닫으면 모든 정보를 잊어버리기 때문에 은행 유저들의 자격 증명을 저장하는데 사용될 수 있습니다.
- Persistent cookie
만료일을 가집니다. 이 cookie는 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제됩니다. 유저들이 방문할때마다 유저 경험을 커스텀하기 위해 특정 웹사이트에서 행동을 기록하는 등 여러 활동들에 사용될 수 있습니다.
예제
제가 잘 몰라서 자세히 적어봤습니다.
// 쿠키를 설정한다
document.cookie = "username=Soojeong; max-age=3600; path=/";
// 쿠키를 가져온다
const cookies = document.cookie.split('; ');
const usernameCookie = cookies.find(cookie => cookie.startsWith('username='));
const username = usernameCookie ? usernameCookie.split('=')[1] : null;
console.log(username);- document.cookie: 현재 웹 페이지의 쿠키를 설정하거나 가져오는 속성으로 이 속성에 문자열을 할당한다.
- "username=Soojeong": 설정할 쿠키의 이름(username)과 값(Soojeong)입니다. 쿠키는 항상 이름=값 형식으로 설정된다.
- max-age=3600: 이 쿠키가 유지될 시간을 초 단위로 설정한다. 여기서는 3600초(1시간) 후에 쿠키가 만료된다.
- path=/: 이 쿠키가 유효한 경로를 지정한다. /는 웹사이트의 모든 경로에서 이 쿠키를 사용할 수 있도록 설정한다.
- .split('; '): 이 메소드는 문자열을 배열로 나누는 역할을 한다. 여기서는 ; 를 기준으로 쿠키를 나누어 각각의 쿠키를 배열의 요소로 만드는데, 쿠키가 username=Soojeong; age=23이라면, cookies 배열은 ['username=Soojeong', 'age=23']가 된다.
- cookies.find(...): 배열의 메소드로, 배열에서 특정 조건을 만족하는 첫 번째 요소를 찾다. 여기서는 각 쿠키를 하나씩 검사한다.
- cookie => cookie.startsWith('username='): 화살표 함수로, 각 쿠키(cookie)가 'username='으로 시작하는지를 검사한다. startsWith는 문자열 메소드로, 해당 문자열로 시작하면 true, 아니면 false를 반환한다.
- 삼항연산자는 조건 ? 참일 때의 값 : 거짓일 때의 값으로 표현가능하다.
- const username = usernameCookie ?: usernameCookie가 존재하는지 확인한다.
- usernameCookie.split('=')[1]: 이 부분은 쿠키 문자열을 =로 나누어 배열로 만들고, 그 배열의 두 번째 요소(인덱스 1)를 가져온다. 예를 들어, usernameCookie가 'username=Soojeong'이라면, split('=')을 사용하여 ['username', 'Soojeong']이라는 배열이 만들어지고 여기서 [1]을 사용하면 'Soojeong'이라는 값이 나온다.
- 만약 usernameCookie가 존재하지 않을 경우 null이 할당된다.
최근 처음 방문하는 웹사이트를 보다보면 '쿠키 동의' 배너를 발견할 수 있습니다. 쿠키 동의를 한다면 브라우저는 쿠키를 저장해 두었다가, 동일한 서버에서 재요청 시 저장된 데이터를 함께 전송하는데, 이렇게 전송된 정보 덕분에 사용자는 동일한 웹사이트에 재방문했을 때 웹사이트를 빠르고 편리하게 이용할 수 있게 됩니다.
참고
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
Window.localStorage - Web API | MDN
localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이
developer.mozilla.org
https://ko.javascript.info/localstorage
localStorage와 sessionStorage
ko.javascript.info
https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage
Window.sessionStorage - Web API | MDN
sessionStorage 읽기 전용 속성은 현재 출처 세션의 Storage 객체에 접근합니다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션이 끝날
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies
HTTP 쿠키 - HTTP | MDN
HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이
developer.mozilla.org
'2주차' 카테고리의 다른 글
| [JavaScript] 이벤트위임 (0) | 2024.10.27 |
|---|---|
| 메모이제이션 - useCallback, useMemo + React.memo (0) | 2024.10.25 |
| 나랑 약속해줘.. Promise..🤫 (0) | 2024.10.24 |
| 유사배열 객체(Array-like Objects)와 배열 메서드 (0) | 2024.10.22 |
| 일급 객체와 JS 함수 뜯어보기 (0) | 2024.10.15 |
