🚀local Storage(로컬 스토리지?) 🚀 | JavaScript 시리즈 017

0. 이전 시리즈 복습(recap)

*알아두자.
1. preventDefault(); 의 기능: 브라우저의 기본동작 막음. 즉 브라우저가 submit 할때 원래 하는 동작을 안하게 된다 대신, 그 기본 동작을 멈추고 우리가 원하는 대로 할 수 있게 된다.

 

1. local Storage 에 대해 간단한 설명

뭔가를 저장하는 건 아주 자주 사용되는 기능. 

예를 들어 유튜브에서 우리가 볼륨을 조절하고 새로고침하면 유튜브가 그 볼륨값을 기억하는 경우.

 

브라우저에 공짜로 뭔가를 기억할 수 있게 해주는 기능이 존재.

그 API 의 이름은 local storage야

콘솔에 local storage 를 입력하면 볼 수 있는데, 이미 정의 되어 있다.

 

2. local Storage 사용법

local storage (*개발자 도구 들어가서 사용)

1. 우리가 브라우저에 뭔가를 저장할 수 있게 해줌.

2. 그러므로 나중에 가져다 쓸 수 있다.

3. local storage 에 뭐가 들어 있는지 보고싶다면? => 개발자 도구를 이용하면 된다. (ctrl + shift +i )

---

 

3-1. local Storage 값 저장하기 : setItem

local storage 에 값 저장하기

저장한 값 확인하기

3-2. local Storage 값 불러오기 : getItem

 

 

3-3. local Storage 값 지우기 : removeItem

 

 

4. 코드

js / html

* 주석

10. 입력란에 입력 되어진 값을 변수 username에 저장한다.
11. local Storage에 username의 키(이름) 으로 변수username(즉, 입력된 값 | 10번줄의 변수 username와 동일) 을 저장한다. 

 

 

5. 결과 확인

그렇다면 이제  로그인 form 안에 이름(입력값)을 적어주면, local Storage에 값이 저장되는지 확인해보자!~

입력란에 coder 라고 입력을 했고 value에 잘 저장된 것을 볼 수 있다.