[JS] 자바스크립트 로컬 스토리지(localStorage) 사용 하기

 

 

 

 

 

🌈 자바스크립트 로컬 스토리지 사용 방법

로컬 스토리지(localStorage) 는 사용자의 컴퓨터에 저장되기 때문에 로컬 저장소라고 한다.

또한 로컬 스토리지는 세션 스토리지(sessionStorage) 와 비슷하지만, 로컬 스토리지의 데이터는 명시적으로 제거하지 않는 이상 자동으로 사라지지 않으나 세션 스토리지의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라진다.

 

그리고 로컬 스토리지에 저장된 데이터는 페이지의 프로토콜별로 구분된다.

예를 들어, HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 로컬 스토리지에 저장된다.

 

로컬 스토리지의 데이터는 키와 값의 쌍으로 이루어져 있다.

로컬 스토리지의 값으로 가능한 것은 DOMString의 형태뿐이며, 객체와 마찬가지로 정수는 자동으로 문자열로 변환되어 저장된다.

 

 

 

 

🙋‍♂️ 예제로 알아보기

◾ 내장 메서드 사용

로컬 스토어의 내장 메서드는 setItem, getItem, removeItem, clear가 있다.

/* setItem */
localStorage.setItem("name", "jinny");
console.log(localStorage) // {keyName: "value"}


/* getItem */
let locValue = localStorage.getItem("name");
console.log(locValue) // jinny


/* removeItem */
localStorage.removeItem("name");
console.log(localStorage) // {}


/* clear */
localStorage.setItem("name", "jinny");
localStorage.clear();
console.log(localStorage) // {}

 

 

◾ 로컬 스토리지에 객체 저장하고 사용하기

로컬 스토어에 객체를 저장할 경우 문자열 'object Object' 로 저장된다.

따라서 객체를 저장할때는 JSON.stringify()를 사용해서 저장하면 객체가 JSON String 형태로 저장되고,

해당 데이터를 꺼내서 쓸 때는 JSON.parse()를 사용하여 다시 객체로 변환하여 사용하면 된다.

let obj = [
  {
    name: "Jinny",
    age: 30,
  }, {
    name: "cocobi",
    age: 29,
  }, 
]


/* JSON.stringify */
localStorage.setItem( 'obj', JSON.stringify(obj) );
console.log(localStorage) 
// Storage {obj: '[{"name":"Jinny","age":30},{"name":"cocobi","age":29}]', length: 1}


/* JSON.parse */
let userInfo = JSON.parse(localStorage.obj);
console.log(userInfo)
// [ 0: {"name":"Jinny","age":30}, 1: {"name":"cocobi","age":29}, length: 2 ]

 

 

 

 

 

 

📌 참고사이트

MDN :: localStorage