로컬 스토리지

브라우저에는 크게 두 개의 스토리지가 있다.
로컬 스토리지와 세션 스토리지

 

Web Storage

HTML5 스펙에서는 웹 스토리지라는 것이 추가됨

 

Cookie

네트워크 요청 시 서버로 함께 저장되는 문자열 데이터
쿠키도 일종의 저장소, 사용자의 활동 정보를 브라우저에 기록해뒀다가 서버에 전달

• 쿠키와 네트워크 요청이 많아지면 비효율이 발생함.
  => 쿠키는 모든 네트워크 요청에 포함되기 때문
• 로컬 스토리지와 세션 스토리지는 네트워크 요청에 포함되지 않기 때문에 쿠키와 다르게 비효율X

Local Storage

key-value 쌍으로 데이터를 저장하고 조회할 수 있는 데이터 저장소
서버로 전달되지 않음
지우지 않는 이상 브라우저나 탭을 닫았다 열어도 유지됨

Session Storage

key-value 쌍으로 데이터를 저장하고 조회할 수 있는 데이터 저장소
서버로 전달되지 않음
같은 탭 안에서는 데이터가 유지되지만, 탭을 닫거나 브라우저를 닫으면 데이터가 지워짐

 

---

로컬 스토리지 관련 함수

localStorage.setItem() : 로컬 스토리지의 값을 저장하는 함수
함수 호출시 getItem() 사용

• 문자열 값만 저장됨. (문자열이 아닌 것은 문자열로 변환해서 저장됨)

ex 코드) 
localStorage.setItem('name', 'steve')
localStorage.getItem('name')
-> 'steve'

// 숫자도 문자열로 변환하여 저장
localStorage.setItem('age', 100)
localStorage.getItem('age')
-> '100'

// object를 문자열 형태로 변경하여 저장
localStorage.setItem('test', {'test': 123})
localStorage.getItem('test')
-> '[object Object]'

 

 

JSON.stringify() : 오브젝트 형태를 스토리지에 저장할 때 사용
문자열 형태(json 형태)로 바꿔줌

ex 코드) 
JSON.stringify({'test': 123})
-> '{"test": 123}'

localStorage.setItem('test', JSON.stringify({'test': 123}))
localStorage.getItem('test')
-> '{"test": 123}'

 

JSON.parse() : 문자열 json데이터를 object로 변환

JSON.parse(localStorage.getItem('test'))
-> {test: 123}

 

localStorage가 브라우저 어디에 저장이 되는지 확인
크롬 개발자도구(f12) -> 어플리케이션 -> 스토리지 -> 로컬스토리지 에서 확인가능. 수정도 가능

---

 

타이핑한 문자 하나하나를 저장하기 위해 코드에서 setItem이 여러번 호출됨 -> 로컬스토리지에 빠르게 입력, 저장 -> 성능에 영향 -> 최적화를 위해 함수를 묶어서 한번에 처리.
=> 디바운스 기법 (디바운스 라이브러리)
Lodash 사이트에서 debounce 검색 후 다운

터미널)
npm install --save lodash.debounce
// --save : package.json에 로데시 디바운스를 명시해줌

app.js)
const debouncedSetItem = debounce(setItem, 5000);
// 타이핑을 안한지 5초 뒤에 SetItem 실행
// debounce 함수를 통해 SetItem에 Debounce가 적용된 함수를 리턴해줌