728x90
sessionStorage란?
참고 : 모질라
window.sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션이 끝날 때 제거되는 차이가 있습니다.
- 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다.
- 탭/창을 닫으면 세션이 끝나고 sessionStorage안의 객체가 초기화됩니다.
- 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성합니다.
사용할 때 알아야 하는 점은 키와 값 모두 String형태로 저장해야 합니다.
키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOMString의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.
객체나 숫자를 값으로 넣어야 하는 경우에는 타입을 string으로 파싱해서 저장하고 불러온 뒤에는 다시 원래 타입으로 파싱을 해줘서 사용해야 합니다.
사용방법
세션 저장하기
sessionStorage.setItem('myCat', 'Tom');
세션 불러오기
sessionStorage.getItem('mycat');
수정을 위한 API는 없습니다. 원래 있는 키의 값을 수정하려고 한다면, 키값을 호출해서 수정한 후에 다시 원래 키값으로 수정한 값을 세션 저장하면 됩니다.
객체를 세션의 값으로 저장하고 불러오기
다음처럼 String으로 파싱하지 않고 json 객체를 sessionStorage에 넣게 되면 [object Object] 값으로 들어갑니다.
String으로 파싱을 하고 넣은다음, 다시 불러와서 웹에 보이도록 해보겠습니다.
작성 코드
<!DOCTYPE html>
<head>
...
</head>
<body>
<div class="session"></div>
<script>
function init() {
const session = document.querySelector('.session');
const json = {
id: '1',
name: 'tom'
}
console.log(session);
sessionStorage.setItem('json', JSON.stringify(json));
const getJson = sessionStorage.getItem('json');
session.innerText = getJson;
}
init();
</script>
</body>
</html>
땡큐
728x90
'자바스크립트' 카테고리의 다른 글
| [Javascript]자바스크립트에서 날짜 사용법 (0) | 2021.01.28 |
|---|---|
| Javascript 변수 선언 가장 기본적인 질문 (0) | 2021.01.25 |
| vscode prettier 설정하기 (0) | 2021.01.23 |
| [Javascript] DOM의 정보와 Javascript 스펙을 가지는 window 객체 알아보기 (0) | 2020.12.29 |
| Javascript로 클라이언트 디바이스및 브라우저 확인하기 (0) | 2020.12.22 |
댓글