1. 웹스토리지란?
키-벨류 쌍, 브라우저에 저장, 쿠키보다 빠르고 조금 더 사이즈 큼(5mb)
-- localStorage 객체 : 저장 기간 없음, 도메인이 다르면 접근 불가능
-- sessionStorage 객체 : 각 세션(하나의 윈도우)마다 데이터가 별도 저장, 브라우저 종료하면 사라짐
- 쿠키 : 보안 문제 있음, 웹에 저장
- 세션 : 데이터를 서버에 놓대 id를 쓰는 것 , 세션 아이디로 서버에 접근
2. 사용방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 웹 스토리지 </title>
</head>
<body>
<!-- localStorage -->
<h2 id="aa"></h2>
<hr>
<!-- sessionStorage -->
<h2 id="bb"></h2>
<script>
//웹 스토리지 : 웹문서(html)가 데이터를 client의 컴퓨터에 저장할 수 있는 기법
//일종의 쿠키(4kb) 웹스토리지는(5mb)
//웹스토리지 2가지 저장소
//1. localStorage
//브라우저가 꺼져도 이전 상태 저장함
//페이지 방문 횟수 저장
// localStorage.aaa = 10; //스토리지에 변수 생성 & 저장하는 방법
if( !localStorage.cnt ) localStorage.cnt=0; //cnt변수 초기화
//기존의 cnt 변수 값 1 증가
localStorage.cnt= parseInt(localStorage.cnt)+1; //스토리지는 모든 값을 문자열로 저장하고 있음.
//출력
document.getElementById('aa').innerHTML= localStorage.cnt + "번째 방문입니다.";
//2. sessionStorage
//브라우저가 켜져 있는 동안만 상태 저장함
if(!sessionStorage.cnt) sessionStorage.cnt=0;
sessionStorage.cnt= parseInt(sessionStorage.cnt)+1;
document.querySelector('#bb').innerHTML= `${sessionStorage.cnt}번째 방문입니다.`;
</script>
</body>
</html>sessionStorage는 브라우저를 종료하고 다시 켜면 이전 정보 날아감을 볼 수 있다
보조기억장치