Web Storage API
- 브라우저에서는 쿠키보다 더 직관적으로 정보를 저장할 수 있는 Web Storage API를 제공한다.
- key/value 로 이루어져 있으며, localStorage와 sessionStroage가 있다.
사용방법
값 저장하기
localStorage.setItem('mId', 'hong');
sessionStorage.setItem('mId', 'kim');- key : mId
- value : hong, kim
값 불러오기
let localId = localStorage.getItem('mId');
let sessionId = sessionStorage.getItem('mId');
console.log('localStorage', localId);
console.log('sessionStorage', sessionId);
- Save → Load 해보면 값이 저장된 것을 알 수 있다.
- 브라우저를 종료했다가 (save 하지 않고) 로드하면 session은 값이 저장되지 않음 (세션에 저장)
- 쇼핑몰 등 소비자 관심 정보를 저장했다가 로드하면 유용하게 사용할 수 있다. (계좌정보 등 민감정보들은 X)
localStorage vs sessionStorage
- localStorage에 비해 sessionStorage가 session에만 저장되기 때문에 훨씬 제한적.
- sessionStorage에 저장된 값은 현재의 탭 내에서만 유지된다. localStorage는 현재 브라우저 전체에서 유지된다.
- 페이지를 새로고침할 때마다 sessionStorage에 저장된 값이 사라지지는 않지만, 현재 탭을 닫고 새로 열면 값이 사라진다.
전체코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>storage</title>
</head>
<body>
<h3>storage</h3>
<form name='frm'>
<input type='button' value='SAVE' name='btnSave'/>
<input type='button' value='LOAD' name='btnLoad'/>
</form>
<script>
/* localStorage, sessionStorage에 값을 저장한 후
브라우저를 종료한 후 그 결과를 조회
(local은 살아있고 session은 없어졌을 것)
*/
frm.btnSave.onclick=function(){
localStorage.setItem('mId', 'hong');
sessionStorage.setItem('mId', 'kim');
}
frm.btnLoad.onclick=function(){
let localId = localStorage.getItem('mId');
let sessionId = sessionStorage.getItem('mId');
console.log('localStorage', localId);
console.log('sessionStorage', sessionId);
}
</script>
</body>
</html>
활용
- outpt 태그에 localStorage에서 가져온 mId 값을 세팅
- 페이지에 들어왔을 때 브라우저에 저장된 값으로 이름을 저장해놓을 수 있다.
'Web 기초' 카테고리의 다른 글
| [Web] 웹 기초 (6) - CSS #2 overflow, visibility, display (0) | 2022.05.10 |
|---|---|
| [Web] 웹 기초 (5) - CSS #1 사용법, 선택자, 가상클래스 (0) | 2022.05.10 |
| [Web] 웹 기초 (3) - Canvas #2 Shadow, Gradient, Rotate (0) | 2022.05.09 |
| [Web] 웹 기초 (2) - Canvas #1 (0) | 2022.05.09 |
| [Web] 웹 기초 (1) - 기본적인 HTML 태그 (글꼴, 문단) (0) | 2022.05.09 |
