Web Storage API
- 웹 스토리지 API는 간단한 데이터를 사용자의 컴퓨터나 기기에 로컬로 저장하는 방법에 대한 표준을 정의한다.
Web Storage
- 사이트 당 최대 5MB / IE 10MB
- 서버로 전송하지 않음
- 유효기간 없음
- JavaScript 객체 저장가능
Cookie
- 사이트 당 최대 4KB
- 서버로 전송
- 유효기간 경과하면 자동삭제
- 객체 저장불가
Local Storage 로컬 스토리지
- 로컬 스토리지
- 브라우저를 통해 사용자의 컴퓨터에 데이터를 지속적으로 저장할 수 있는 공간
- 다시 사이트를 방문했을 때 로컬스토리지에 저장된 모든 데이터를 사용 가능
- 예) 특정 사용자의 PC에 적용되는 설정(개인화 서비스)
- 로컬스토리지에 데이터 저장하고 불러오기
window.onload = function() {
var save = document.getElementById('save');
var load = documenet.getElementById('load');
// 데이터 저장
save.onclick = function() {
var text = document.getElementById('text');
// 로컬스토리지에 데이터 저장 (key, value)
localStorage.setItem('name',text.value);
// input 태그 초기화
text.value='';
};
// 저장된 데이터 읽기
load.onclick = function() {
// 로컬스토리지에 저장된 데이터 읽기
// var loadedName = localStorage.getItem('name'); // key
var loadedName = localStorage.name;
alert('저장된 값 : ' + loadedName);
};
};<body>
<h2>Session Storage</h2>
<input type="text" id="text"><br>
<button id="save">저장</button>
<button id="load">불러오기</button>
</body>
Session Storage 세션 스토리지
- 세션 스토리지
- 브라우저가 열려있는 동안 모든 데이터를 기억하고 있다가 탭(또는 창)을 닫으면 모두 지워지는 저장 공간
- 각 창은 자체적인 개별 세션 스토리지 객체를 가지며, 데이터를 별도로 유지하게 된다.
- 특정 사이트 접속해서 사용자 세션이 지속되는 동안만 존재한다. (임시데이터)
- 세션 스토리지에 데이터 저장하고 불러오기
window.onload = function() {
// 초기값 읽기
load();
var save = document.getElementById('save');
// 데이터 저장
save.onclick = function() {
var first = document.getElementById('first');
var name = first.value;
// 세션스토리지에 데이터 저장 (key, value)
sessionStorage.setItem('name',name);
// 저장된 값 읽기
load();
};
// 저장된 데이터 읽기
function load() {
var display = document.getElementById('display');
var name = sessionStorage.getItem('name');
if(name) { // undefined면 false, 데이터가 있으면 true
display.innerHTML = '저장된 값 : ' + name;
}
}
};<body>
<h2>Session Storage</h2>
<input type="text" name="first" id="first">
<button id="save">저장</button>
<div id="display">비어있음</div>
</body>
'Web > HTML5' 카테고리의 다른 글
| [HTML] 파일(File) API (0) | 2021.08.09 |
|---|---|
| [HTML] 시맨틱 태그(Semantic Elements) (0) | 2021.08.02 |
| [HTML] 비디오 태그 <video>, 오디오 태그 <audio>, iframe 태그 (0) | 2021.07.28 |
| [HTML] 입력 양식 태그 <form> (0) | 2021.07.28 |
| [HTML] 목록 태그 <ul> <ol>, 표 태그 <table> (0) | 2021.07.28 |