localStorage와 sessionStorage
- 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.
- 둘 다 저장공간. 단, 차이점은 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진다.
- 대부분의 데이터의 경우 DB에 저장하므로 로컬 및 세션 스토리지가 사용되는 곳은 그리 많지 않다.
- 글 작성 중간중간에 잃어버리지 않기 위한 임시저장 용도
- 장바구니나 좋아하는 콘텐츠 등 수시로 변경되는 경우
- 방문자의 이동경로를 저장하였다가 이동할 경우
- 그 외 서버에 반드시 저장할 필요가 없는 경우
| localStorage |
sessionStorage |
| 오리진이 같은 탭, 창 전체에서 공유된다. |
오리진이 같은 브러우저 탭, iframe에서 공유된다. |
| 브라우저를 껏다 켜도 남아있다. |
페이지를 새로고침해도 남아있지만, 탭이나 브라우저를 종료하면 사라진다. |
- localStorage, sessionStorage 객체의 메서드 / 프로퍼티
# 키-값 쌍을 보관
setItem(key, value)
# 키에 해당하는 값을 가져옴
getItem(key)
# 키와 해당 값을 삭제
removeItem(key)
# 모든것을 삭제
clear()
# index에 해당하는 키를 받아옴
key(index)
# 저장된 항목의 갯수를 얻음
length
# 키 전체를 얻음
Object.keys
localStorage
- 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
- 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
setItem() 데이터 저장
# 데이터 저장하는 2가지 방법
localStorage.setItem('test', '123');
localStorage.test = '123';
getItem() 데이터 불러오기
localStorage.test;
localStorage.getItem('test');
# 전체 localStorage에 담겨있는 값 확인
localStorage.getItem();
removeItem() 데이터삭제
# 원하는 값 삭제
localStorage.removeItem('test');
# 저장된 모든 값 삭제
localStorage.clear();
키 순회하기
- 배열처럼 다루면 전체 키-값을 얻을 수 있다.
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i);
alert(`${key}: ${localStorage.getItem(key)}`);
}
- 일반 객체를 다룰 때처럼 for key in localStorage 반복문을 사용해도 전체 키-값을 얻을 수 있습니다.
단, 이 방법을 사용하면 필요하지 않은 내장 필드(getIrem, setItem)까지 출력됩니다.
문자열만 사용
- 키와 값은 반드시 문자열이어야 한다.
- 숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동변환된다.
localStorage.user = {name: "John"};
alert(localStorage.user); // [object Object]
- JSON사용하여 객체사용 가능
- JSON.stringify
- JSON.parse
localStorage.user = JSON.stringify({name: "John"});
let user = JSON.parse( localStorage.user );
alert( user.name ); // John
--------------------------------------------------
let userNm = {
name : 'amy',
phone : param.phone
}
sessionStorage.setItem('user', JSON.stringify(userNm))
let userNm = JSON.parse(sessionStorage.getItem('user'));
sessionStorage
- 세션을 기준으로 데이터가 저장 및 유지되기 때문에 이 객체에 저장된 값은 일시적인 수명을 가지게 된다.
- 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다. 현재 떠있는 탭 내에서만 유지된다.
- 만약 데이터가 삭제되지 않길 바란다면 localStorage를 사용해야한다.
- 단, 세션을 사용한 저장방법은 보안 및 중요한 데이터의 경우 무방비로 노출되는 경우를 피하기 위해서 사용되는 경우가 많다.
# domain이란 키(key) 값을 사용하여 해당 텍스트를 저장함
sessionStorage.setItem("domain", "webisfree.com");
# 키에 저장된 값을 반환. 여기서는 webisfree.com 출력됨
sessionStorage.getItem("domain");
# domain 키와 데이터 모두 삭제
sessionStorage.removeItem("domain");
# 저장된 모든 값 삭제
sessionStorage.clear();