[ Javascript ] Storage 활용

Stroage 활용

key, value 형태로 저장된다. 

stroage에는  Local Stroage와 Session Stroage가 존재한다. 

 

Window.localStorage - Web API | MDN

 

 

1. Session Stroage

페이지 세션이 끝날때 사라진다. (브라우저 닫을때)

 

2. Local Stroage

스토리지 객체에 접근 할수 있고 브라우저 세션 간에 공유된다.

데이터가 만료되지 않는다. (반 영구)

1-1. 저장 

문자데이터 형식으로 " " 저장해야한다.

localStorage.setItem("myCat", "Tom");

1-2. 값 가져오기 

const cat = localStorage.getItem("myCat");

1-3. 제거하기 

localStorage.removeItem("myCat");

 

1-4. 객체 사용 방법 예제 

const user= {
	name = 'heropy',
    age = 85,
    email = 'aa@naver.com'
}

//값을 문자로 변형하여 저장
localStorage.setItem('user',Json.stringify(user));

//값을 다시 객체로 가져올때 
console.log(JSON.parse(localStorage.getItem('user')));

 

1-5.  Local Stroage 저장된 내용 수정 방법

• 기존 저장된 값을 getItem으로 가져오기
• 객체로 변환
• 변경 필요한 부분 수정
• 기존 저장된 이름에 덮어 써준다. 

const str = localStorage.getItem('user');
const obj = JSON.parse(str);
obj.age = 22

localStorage.setItem('user',JSON.stringify(obj));

 

3. lowdb

lowdb 를 활용하여 더 쉽게 사용가능하다. 

사용방법은 아래 링크에서 확인 할 수 있다.

https://github.com/typicode/lowdb

GitHub - typicode/lowdb: Simple to use local JSON database. Use native JavaScript API to query. Written in TypeScript. (supports