localStorage와 sessionStorage
자바스크립트로 웹 브라우저의 저장소 local과 session에 데이터 저장가능
두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.
세션은 페이지를 새로 고침해도 데이터가 남아있고,
로컬은 브라우저를 다시 실행해도 남아있음.
setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.
키와 값은 문자열이여야만 한다.
=> JSON 문자열 변환 JSON.stringify()
=> 문자열을 다시 Object로 변환 JSON.parse()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Learn JSON</h1>
<div id="output"></div>
<form id="myForm">
<input type="text" name="name" value="펭수"><br>
<input type="text" name="email" value="peng@naver.com"><br>
<input type="text" name="company" value="디스커버리"><br>
<input type="submit" value="전송">
</form>
<script>
var myForm = document.getElementById('myForm');
window.onload = function () {
if (sessionStorage['person'] != null) {
var data = JSON.parse(sessionStorage['person'])
var message = '환영합니다 ' + data.name + '님 ~~';
document.getElementById('output').innerHTML = message;
console.log(data)
}
}
myForm.addEventListener('submit', function (e) {
e.preventDefault();
var data = JSON.stringify(formData(myForm));
if (data) {
sessionStorage['person'] = data;
}
console.log(data)
})
function formData(form) {
var el = form.querySelectorAll('input[type="text"]');
var myData = {};
for (var x = 0; x < el.length; x++) {
var name = el[x].name;
var value = el[x].value;
myData[name] = value
}
return myData;
}
</script>
</body>
</html>
픽서