08.13 스터디

GDSC-DEU · Aug 13, 2024 · 2f746ab · 2f746ab
1 parent 7d5408f
commit 2f746ab
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 8 deletions.
diff --git a/seungjin/nomad/README.md b/seungjin/nomad/README.md
@@ -24,3 +24,37 @@
 ## CSS 이벤트:
 - **transitionend**: CSS 애니메이션이 종료되었을 때 발생합니다.
 
+
+***
+
+# 로컬스토리지
+로컬스토리지는 웹 브라우저에서 제공하는 데이터 저장 기능입니다. 이를 통해 웹사이트는 사용자의 컴퓨터나 스마트폰에 작은 양의 데이터를 저장할 수 있습니다.
+
+``` js
+// 데이터 저장
+localStorage.setItem('username', 'SeungJin');
+
+// 데이터 불러오기
+let username = localStorage.getItem('username');
+
+// 데이터 삭제
+localStorage.removeItem('username');
+```
+
+주요 특징:
+- 용량: 보통 5-10MB의 저장 공간을 제공합니다.
+- 지속성: 브라우저를 닫아도 데이터가 유지됩니다.
+- 도메인 별 저장: 각 웹사이트는 자신의 고유한 저장 공간을 가집니다.
+- 클라이언트 측 저장: 서버가 아닌 사용자의 기기에 저장됩니다.
+- 만료기간 없이 저장이 가능하여 자동 로그인, 다크 모드에 사용됩니다.
+
+장점:
+- 쿠키보다 큰 저장 용량
+- 서버 부하 감소
+- 빠른 데이터 접근
+
+단점:
+- 보안에 취약할 수 있음 (중요한 정보는 저장하지 않아야 함)
+- 브라우저 간 호환성 문제가 있을 수 있음
+
+... 쿠키 세션 로컬스토리지 ...
diff --git a/seungjin/nomad/app.js b/seungjin/nomad/app.js
@@ -1,9 +1,22 @@
 const loginInput = document.querySelector("#login-form input");
-const loginButton = document.querySelector("#login-form button");
+const loginForm = document.querySelector("#login-form");
 
-function onBtnClick() {
-  console.log(loginInput.value);
-  console.log("Click");
+const del = document.querySelector("#login-form .del")
+
+const HIDDEN_CLASSNAME = "hidden"
+
+function onLoginSubmit(event) {
+  event.preventDefault();
+  loginForm.classList.add(HIDDEN_CLASSNAME);
+  const username = loginInput.value;
+  localStorage.setItem("username", username);
+  greeting.innerText = `Hello ${username}`;
 }
 
-loginButton.addEventListener("click", onBtnClick);
+function delItem(){
+  localStorage.removeItem('username');
+}
+
+loginForm.addEventListener("submit", onLoginSubmit);
+
+del.addEventListener("click",delItem)
diff --git a/seungjin/nomad/index.html b/seungjin/nomad/index.html
@@ -7,10 +7,12 @@
     <title>Momnentum App</title>
   </head>
   <body>
-    <div id="login-form">
-      <input type="text" placeholder="What is your name?" />
+    <form id="login-form">
+      <input type="text" placeholder="What is your name?" maxlength="15" required/>
       <button type="submit">Login</button>
-    </div>
+      <button class="del">Del</button>
+    </form>
+    <h1 id="greeting" class="hidden"></h1>
   </body>
   <script src="app.js"></script>
 </html>