노마드 코딩 Momentum clone coding(1)

nomad coding의 momentum 클론 강의를 듣고 작성하는 게시물입니다.

localStorage

유저의 웹 상에 데이터를 저장, window가 닫힌 후에도 데이터가 저장되어있다.

1. setItem(): Add key and value to localStorage
2. getItem(): Retrieve a value by the key from localStorage
3. removeItem(): Remove an item by key from localStorage
4. clear(): Clear all localStorage
5. key(): Passed a number to retrieve nth key of a localStorage

setItem()

• 웹상에 데이터를 저장할 때 사용한다.
• 2개의 파라미터(key,value)를 가진다.
• value값에 대한 update가 가능
• localStorage는 string만 저장한다.

windows.setItem('title','Frozen');

 

how to use

momentum2를 제작하면서 userName에 대해 localstorage를 사용했다.

setting HTML

• form > input 태그 작성

...
        <form class="js__form">
            <input type="text" class="greeting" placeholder="Waht's your name?">
        </form>
        <script src="clock.js"></script>
        <script src="greeting.js"></script>
...

setting javascript

• form, input,js_greeting 에 대한 const 변수 선언
• Local storage에 저장 될 userName에 대한 const 선언(USER_LS)
• user가 load될 때 발생할 paintName함수 생성
• user load에 대한 loadName 함수 생성

const form = document.querySelector(".js__form"),
    nameInput = form.querySelector("input"),
    greeting = document.querySelector(".js__greeting");

const USER_LS = "currentUser",
showing_CN = "showing";

function paintName(text){
    form.classList.remove(showing_CN);
    greeting.classList.add(showing_CN);
    greeting.innerText = `Hello${text}`;
}

function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null){
        //she is not
    }else{
        paintName(currentUser);
    }
}



function init(){
    loadName();
}

init();

setting CSS

• form과 greeting에 showing classList를 추가하여 userName입력 여부에 따라 나타나거나 사라지게 함

.form,
.greeting {
	display: none;
}

.showing {
	display: block;
}

 

localStorage 에 대해 참고한 사이트

blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/

The complete guide to using localStorage in JavaScript apps - LogRocket Blog

www.taniarascia.com/how-to-use-local-storage-with-javascript/

How to Use Local Storage with JavaScript

하... 저장하다가 알았는데 깃허브에 업로드가 안되고있다.

어디에 저장되고있는거지 이거???? 하;;;,,,,,