웹 프로그램을 만들 때 아무리 간단한 프로그램이라도 데이터를 저장하지 않는 것은 없을 것입니다.
이럴 때 우리는 주로 데이터베이스 서버에 저장합니다.
하지만 저장해야 할 데이터가 중요하지 않고, 영구 저장할 필요가 없는 데이터라면
서버단에 저장하는 것은 낭비일 수 있습니다.
이럴 때 클라이언트, 즉 브라우저에 데이터를 저장하는 Web API인 localStroage에 대해 살펴보겠습니다.
localStorage에 데이터 저장하기
localStorage의 데이터 저장 함수는 localStorage.setItem(key, value)입니다.
key와 Value로 저장합니다. Object처럼 접근해 데이터를 추가할 수도 있습니다.
// key와 value로 저장합니다.
localStorage.setItem('key', 'value');
localStorage.getItem('name', 'Aiden');
// Object처럼 데이터를 추가저장할 수도 있습니다.
localStorage.Age = 20;
localStorage['grade'] = 'A';localStorage 데이터 가져오기
localStorage의 데이터 가져오는 함수는 localStorage.getItem(key)입니다.
저장하였던 key를 통해 Value를 가져옵니다. 역시 Object처럼 접근해 데이터를 얻을 수 있습니다.
localStorage.getItem('key')
// output: 'value'
localStorage.name
// output: 'Aiden'
localStorage['grade']
// output: 'A'localStorage 데이터 삭제하기
localStorage의 데이터 삭제 함수는 localStorage.removeItem(key)입니다.
저장하였던 key를 통해 key에 해당하는 데이터를 삭제합니다.
localStorage.clear() 함수를 통해 localStorage에 저장된 모든 데이터를 삭제할 수도 있습니다.
localStorage.getItem('name');
// output: 'Aiden'
localStorage.removeItem('name');
localStorage.getItem('name');
// output: null
localStorage.clear();
localStorage.getItem('grade');
// output: null
localStorage.getItem('key');
// output: null
localStorage의 특징
1. 도메인 & 브라우저별로 저장됩니다. ( 같은 도메인 & 브라우저에서 저장된 데이터만 접근 가능 )
2. 유효기간이 없고 직접 삭제하기 전까지 영구보존 ( 용량 제한 5MB )
3. 값은 반드시 문자열로 저장됩니다. ( 배열이나 객체 등은 주로 Json으로 바꿔 저장하면 됩니다. )
주의할 점 : 굉장히 접근이 쉽기 때문에 보안에 예민하거나 중요한 데이터라면 결코 localStorage에 저장하지 않습니다
sessionStorage에 대하여
sessionStorage는 localStorage와 사용법이 똑같습니다.
다만 sessionStorage는 브라우저의 session이 끝나면 데이터가 사라지는 차이가 있습니다.
보존의 필요가 없는, 지금 세션 내에서만 필요한 데이터라면 sessionStorage를 사용해도 좋겠습니다.