$(document).ready(function() {
// $("선택자").on("submit", function () {}); // 제출하다
// 선택자는 항상 form 태그여야함
// submit 되면 항상 refresh 됨
// Local Storage : 사용자가 지우기 전까지 유지
// .setItem(), .getItem(), .removeItem(), .clear() 메서드가 있음
// Session Storage : 브라우저 닫으면 끝
// Cookies : 만료기한이 정해진 데이터
function setUser() {
var _name = localStorage.getItem("user"); // get
if (_name !== null) { // 데이터가 있는 경우
$(".userInfo").hide();
$(".welcome").show();
$(".welcome .user-name").text(_name);
} else { // 비어있는 경우
$(".userInfo").show();
$(".welcome").hide();
}
}
// console.log(_name); // 해당 데이터가 없으면(데이터를 잘못 입력했으면) null 값이 출력됨
setUser(); // 함수 실행
$("#userName").on("submit", function (e) {
e.preventDefault(); // 새로고침 막기
// console.log("가나다라마");
// $(".userInfo").fadeOut();
// $(".welcome").fadeIn();
var userName = $(this).find("input").val(); // value(데이터)를 가져오는 메서드
// console.log(userName);
localStorage.setItem("user", userName); // set, submit을 통해 Local Storage에 저장, user라는 키가 생김
// $(".welcome .user-name").text(userName);
_name = localStorage.getItem("user"); // 저장한 value
setUser(); // 함수 실행
});
$(".edit button").on("click", function () {
$("span.user-name").hide();
$("#userEdit").css("display", "inline-block");
$("#userEdit input").val($(".user-name").text()).focus().select();
$("#userEdit input").focus(); // focus() <-> blur()
});
$("#userEdit").on("submit", function () {
// e.preventDefault(); // 새로고침 막기
var editName = $(this).find("input").val();
localStorage.setItem("user", editName);
});
});