210424 JavaScript jQuery Widget 풀이 (main temp.js)

$(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);
    });
});