1. webStorage
로컬 스토리지 : 브라우저를 통해 사용자의 컴퓨터에 데이터를 지속적으로 저장할 수 있는 공간
다시 사이트를 방문했을 때 로컬 스토리지에 저장된 모든 데이터를 사용 가능1) localStorage
<title>로컬 스토리지</title>
<script type="text/javascript">
window.onload=function(){
//이벤트 연결
let save = document.getElementById('save');
save.onclick = function(){
let text = document.getElementById('text');
//로컬 스토리지에 데이터 저장
//localStorage.setItem('name',text.value); --> (key,value) 쌍으로 저장
localStorage.name = text.value;
//초기화
text.value = '';
};
let load = document.getElementById('load');
load.onclick=function(){
//로컬 스토리지에 저장된 데이터 읽기
let loadedName = localStorage.getItem('name');
alert('localStorage 객체에 저장된 이름 : ' + loadedName);
};
};
</script>
</head>
<body>
<input type="text" id="text"><br>
<button id="save">저장</button>
<button id="load">불러오기</button>
</body>
</html>2) localStorage
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload=function(){
let save = document.getElementById('save');
save.onclick=function(){
//사용자가 입력한 번호,이름,주소를 읽어옴
let num = document.getElementById('num');
let name = document.getElementById('name');
let addr = document.getElementById('addr');
//JSON(JavaScript Object Notation) 형태의 문자열 생성
let memberStr = '{"num":'+num.value+',"name":"'+name.value+'","addr":"'+addr.value+'"}';
//로컬 스토리지에 저장
localStorage.member = memberStr;
//초기화
num.value = '';
name.value = '';
addr.value = '';
};
let load = document.getElementById('load');
load.onclick=function(){
//저장된 문자열 읽어오기
let loadedMemberStr = localStorage.member;
//문자열을 객체화
let memberObj = $.parseJSON(loadedMemberStr);
//객체에 있는 내용 확인
alert(memberObj.num + ',' + memberObj.name + ',' + memberObj.addr);
};
};
</script>
</head>
<body>
번호 <input type="text" id="num"><br>
이름 <input type="text" id="name"><br>
주소 <input type="text" id="addr"><br>
<button id="save">저장</button>
<button id="load">불러오기</button>
</body>
</html>3) localStorage
<title>로컬 스토리지</title>
<script type="text/javascript">
window.onload=function(){
//초기값 설정
load_setting();
//이벤트 연결
document.getElementById('frm').onsubmit=function(event){
//설정값 저장
save_setting();
//기본 이벤트 제거(서버 전송하지 않기 위해서)
event.preventDefault();
};
//로컬 스토리지에 저장된 데이터 반환
function load_setting(){
let bgColor = localStorage.getItem('bg_color');
let textColor = localStorage.getItem('text_color');
let textSize = localStorage.getItem('text_size');
document.getElementById('bg_color').value = bgColor;
document.getElementById('text_color').value = textColor;
document.getElementById('text_size').value = textSize;
//스타일 반영
apply_data();
}
//로컬 스토리지에 설정값 저장
function save_setting(){
localStorage.setItem('bg_color',document.getElementById('bg_color').value);
localStorage.setItem('text_color',document.getElementById('text_color').value);
localStorage.setItem('text_size',document.getElementById('text_size').value);
//스타일 반영
apply_data();
}
//스타일 태그에 반영
function apply_data(){
let bg_color = document.getElementById('bg_color');
document.body.style.backgroundColor = bg_color.value;
let text_color = document.getElementById('text_color');
document.body.style.color = text_color.value;
let text_size = document.getElementById('text_size');
document.body.style.fontSize = text_size.value;
}
};
</script>
</head>
<body>
<h2>환경 설정 값 기억</h2>
<form id="frm">
<fieldset>
<legend>색상/글자 크기 선택</legend>
<ul>
<li>
<label for="bg_color">배경색</label>
<input type="text" name="bg_color" id="bg_color">
</li>
<li>
<label for="text_color">글자색</label>
<input type="text" name="text_color" id="text_color">
</li>
<li>
<label for="text_size">글자크기</label>
<select name="text_size" id="text_size">
<option value="16px">16px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
</select>
</li>
</ul>
<input type="submit" value="저장">
</fieldset>
</form>
</body>
</html>4) sessionStorage
세션 스토리지 : 브라우저가 열려있는 동안 모든 데이터를 기억하고 있다가 탭(또는 창)을 닫으면 모두 지워지는 저장 공간<title>세션 스토리지</title>
<script type="text/javascript">
window.onload=function(){
load(); //데이터 읽기
let save = document.getElementById('save');
save.onclick=function(){
let first = document.getElementById('first');
//세션 스토리지에 데이터 저장
//sessionStorage.setItem('name2',first.value);
sessionStorage.name2 = first.value;
load();
};
};
function load(){
let display = document.getElementById('display');
//let name2 = sessionStorage.getItem('name2');
let name2 = sessionStorage.name2;
//저장된 값이 없으면 undefined 반환
if(name2){
display.innerHTML = '저장된 값 : ' + name2;
}
};
</script>
</head>
<body>
<h2>세션 스토리지</h2>
<input type="text" name="first" id="first">
<button id="save">저장</button>
<div id="display">비어있음</div>
</body>
</html>2. file
1)
<title>file</title>
<script type="text/javascript">
window.onload=function(){
//이벤트 연결
document.getElementById('file').onchange=function(){
let file = this.files[0];
//파일의 정보 취득. 취득한 정보 중 파일명 출력
alert(file.name + '을 선택했습니다.');
};
//읽기 버튼을 클릭할 떄
document.getElementById('btnStart').onclick=function(){
readProcess();
};
};
//파일의 정보 제공
function readProcess(){
//선택한 파일에 대한 정보 읽기
let file = document.getElementById('file').files[0];
if(!file){ //= if(file == undefined)
alert('파일을 선택하세요');
return; //선택한 파일이 없으므로 빠져나감
}
document.getElementById('filename').textContent = file.name;
document.getElementById('filesize').textContent = '('+file.size+'bytes)';
document.getElementById('filetype').textContent = file.type;
document.getElementById('filedate').textContent = file.lastModifiedDate.toLocaleString();
let encodeList = document.getElementById('encoding');
let encoding = encodeList.value;
//파일 읽기
let reader = new FileReader();
reader.readAsText(file,encoding); //선택한 파일을 읽어서 문자열로 저장
reader.onload=function(){
let disp = document.getElementById('contents');
disp.value = reader.result; //읽어들인 내용 반환
};
read.onerror=function(){
alert('에러 발생');
}
}
</script>
</head>
<body>
<h2>현재 시스템의 파일 읽기</h2>
<input type="file" id="file" accept="text/*" multiple="multiple">
<select id="encoding">
<option>EUC-KR</option>
<option>UTF-8</option>
</select>
<button id="btnStart">읽기</button>
<br>
<div>
<span id="filename">파일명</span>
<span id="filesize">파일크기</span>
<span id="filetype">파일타입</span>
<span id="filedate">파일의 마지막 갱신 일시</span>
</div>
<textarea rows="10" cols="50" id="contents" readonly="readonly"></textarea>
</body>
</html>[실행결과]
2)
<title>이미지 미리 보기</title>
<script type="text/javascript">
window.onload=function(){
let image = document.getElementById('image');
let file = document.getElementById('file');
//이벤트 연결
file.onchange=function(){
if(!file.files[0]){
alert('파일을 선택하세요!');
image.src = '../files/face.png';
return;
}
let reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload=function(){
image.src = reader.result;
};
};
};
</script>
</head>
<body>
<h2>이미지 미리 보기</h2>
<div>
<img id="image" src="../files/face.png" width="200" height="200" alt="Image Preview">
</div>
<input type="file" id="file" accept="image/gif,image/png,image/jpeg">
</body>
</html>