210424 JavaScript jQuery Widget 풀이 (main.js)

$(document).ready(function() {
    //$(sel).on("submit", function() {}) 제출하다.
    // 선택자는 항상 form!
    // submit되면 항상 refresh됨.

    //Local Storage : 사용자가 지우기 전까지 유지
    // .setItem(); .getItem(); .removeItem()

    //Session Storage : 브라우저 닫으면 끝!
    //Cookies : 만료기한이 정해진 데이터

    function setUser() {
        var _name = localStorage.getItem("user");
        if(_name !== null){//데이터가 있다면
            $(".userInfo").hide();
            $(".welcome").show();
            $(".welcome .user-name").text(_name);
        } else { //비어있지 경우. 
            $(".userInfo").show();
            $(".welcome").hide();
        }
    }
    setUser();
    

    $("#userName").on("submit", function(e) {
        e.preventDefault();//새로고침 막기

        var userName = $(this).find("input").val();//value를 가져오는 메서드
        localStorage.setItem("user",userName);//로컬스토리지에 key와 value 저장
        setUser();//함수 실행
    })

    $(".edit button").on("click", function() {
        $("span.user-name").hide();
        $("#userEdit").css("display","inline-block");
        $("#userEdit input").val($(".user-name").text()).focus().select();
        // .focus()<-> .blur()
    })

    $("#userEdit").on("submit", function() {
        var editedName = $(this).find("input").val();
        localStorage.setItem("user",editedName);
    })

})