JS - 로컬 저장소

로컬 저장소는 JavaScript 가 사용자의 브라우저에 데이터를 저장하는 것을 말합니다. 저장되는 방식은 쿠키와 같지만 보다 강력합니다.

사용자가 브라우저에 접속하면 스토리지는 자동으로 만들어 지고, 이렇게 저장된 스토리지는 사용자가 브라우저를 닫았다가 다시 열어도 계속 유지됩니다. 쿠키는 4kb를 저장하지만 스토리지는 5Mb를 저장할 수 있습니다. 

이렇듯 스토리지를 제거하지 않는 이상 데이터를 오랫동안 보존합니다. 또한, 쿠키와는 다르게 데이터 유효 기간이 없습니다. 형식은 다음과 같습니다.

localStorage.메서드

메서드	설 명
key(n)	n 번째 키의 이름을 문자열로 반환. (n 은 index 입니다.) 객체의 속성은 정렬되지 않습니다. 모든 항목에 액세스하려면 for 문을 이용하세요.
getitem(key)	key 의 값을 반환. key 가 없으면 null 을 반환
setitem(key, value)	key 와 value 를 저장할 때
removeitem(key)	key 를 삭제할 때
clear()	모든 데이터를 삭제할 때

쿠키 데이터 저장하기

데이터를 저장하고 key() 메서드로 모든 쿠키의 이름을 얻습니다. key 번호는 정렬되지 않기 때문에 for 문으로 값을 확인할 수 있습니다.

<script>
localStorage.setItem('name', '하보니');
localStorage.setItem('age', 20);
localStorage.setItem('job', '백수');

for(var i = 0; i < localStorage.length; i++) {
  console.log(localStorage.key(i));
}
/*
  결과:
  age
  job
  name
*/
</script>

쿠키 저장은 다음의 방법도 가능합니다.

<script>
// 쿠키를 저장합니다.
localStorage["car"] = "BMW";

// 값을 확인합니다.
document.write(localStorage["car"]); // BMW
</script>

쿠키 데이터 읽기

쿠키를 읽어오는 방법은 매우 쉽습니다.

<script>
localStorage.setItem('name', '하보니');
localStorage.setItem('age', 20);
localStorage.setItem('job', '백수');


// name 값을 읽어 옵니다.
var name = localStorage.getItem("name");
document.write(name); // 하보니

document.write(localStorage.length); // 3
</script>

쿠키 데이터 삭제하기

<script>
localStorage.setItem('name', '하보니');
localStorage.setItem('age', 20);
localStorage.setItem('job', '백수');

document.write(localStorage.length); // 3


// job 을 삭제합니다.
localStorage.removeItem('job');
document.write(localStorage.length); // 2


// 쿠키를 모두 삭제합니다.
localStorage.clear();
document.write(localStorage.length); // 0
</script>

로컬 스토리지 지원 확인

로컬 스토리지를 지원하는지 확인하기 위해 다음의 방법으로 가능합니다.

<script>
if('localStorage' in window && window['localStorage'] !== null) {
  console.log("Storage available.");
}else{
  console.log("Storage is not available.");
}
</script>