<!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>
<h3>브라우저 저장소 사용</h3>
<script>
let data = 'test';
//브라우저 로컬 storage에 데이터 저장 - 브라우저가 닫혔다 켜져도 데이터 잔존
// localStorage.setItem("k1", "v1");
// localStorage.setItem("k2", "v2");
// localStorage.setItem("k3", "v3");
// //브라우저 로컬 storage에 저장된 데이터 반환
// // alert(localStorage.getItem("k2"));
//브라우저 세션 storage에 저장, 단 브라우저 종료시 데이터 자동 휘발
// sessionStorage.setItem("k1", "재석");
// sessionStorage.setItem("k2", "종원");
</script>
</body>
</html>
JSON & Storage 미션
<!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>
<h3>JSON & Storage 이용한 미션</h3>
<hr>
<form class="ipt-form">
<input type="text" id="ipt1" value="" placeholder="과일 1"> <br>
<input type="text" id="ipt2" value="" placeholder="과일 2"> <br>
<input type="text" id="ipt3" value="" placeholder="과일 3"> <br>
</form>
<hr>
<button id="btn" onclick="json()">객체 생성</button>
<hr>
<a href="step12-pageTwo.html" >데이터 보기</button>
<script src="step12.js"></script>
</body>
</html>
<!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>
<h3>입력받은 데이터</h3>
<button id="btn" onclick="output()">클릭해서 보기</button>
<p id="data"></p>
<script src="step12.js"></script>
</body>
</html>
const form = document.querySelector(".ipt-form");
const ipt1 = document.getElementById("ipt1");
const ipt2 = document.getElementById("ipt2");
const ipt3 = document.getElementById("ipt3");
function json() {
const obj = {"k1":ipt1.value, "k2":ipt2.value, "k3":ipt3.value};
localStorage.setItem("data", JSON.stringify(obj));
console.log(obj);
}
function output() {
let data = localStorage.getItem("data");
document.getElementById("data").innerHTML = data;
};
