[JavaScript] localStorage

 localStorage는 웹 스토리지 객체(Web Storage Object)로 브라우저 내에 객체로서 저장할 수 있게끔 해주는 문법이다.

localStorage에 저장한 값은 웹을 새로고침하거나 꺼도 유지되며 다시 실행하면 데이터가 사라지지 않고 남아있다.

하지만 api를 사용하는 것이 아닌 브라우저 내에 저장하는 것으로 다른 컴퓨터(사용자)와 코드만 공유할 경우 저장한 값을 공유할 수는 없다. 본인의 로컬에서만 저장 및 수정이 가능하며 대부분의 브라우저가 2MB 이상의 객체를 저장할 수 있다.

 

get, set, remove 

localStorage.setItem(key, value) - key, value 쌍을 저장함 (이미 존재하는 key라면 덮어씀)

localStorage.getItem(key) - key에 해당하는 value를 불러옴

localStorage.removeItem(key) - key와 key에 해당하는 value 쌍을 삭제함

localStorage.setItem("abc", 123);
localStorage.setItem("def", 456);
localStorage.setItem("ghi", 789);

console.log(localStorage.getItem("def")); // 456
localStorage.removeItem("def");
console.log(localStorage.getItem("def")); //null

def는 삭제됨

 

clear, key, length

localStorage.clear() - 모든 정보를 삭제함

localStorage.key(index) - index에 해당하는 key값을 불러옴

localStorage.length - 저장된 쌍의 개수를 불러옴

localStorage.setItem("abc", 123);
localStorage.setItem("def", 456);

localStorage.clear();
console.log(localStorage.length); // 0

localStorage.setItem("age", 23);
localStorage.setItem("gender", "male");

console.log(localStorage.key(1)); // gender
console.log(localStorage.key(0)); // age
console.log(localStorage.length); // 2

abc, def 는 clear됨