[JS] JavaScript localStorage 활용하기

 

💼 localStorage란?

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다.
저장한 데이터는 브라우저 세션 간에 공유됩니다. 

• Application ⇒ Storage
• localStorage : 데이터를 반영구적으로 사용가능
• sessionStorage: 페이지를 닫을 때 데이터가 지워짐.

Window.localStorage - Web API | MDN

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

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

localStorage.removeItem('myCat');

localStorage.clear();

 

const user = {
  name: 'HEROPY',
  age: 85,
  eamils: [
    'thesecon@gmail.com',
    'neo@zillinks.com'
  ]
}

// localStorage에 저장.
// 객체데이터를 문자데이터화 하여 사용해야 함.
// 브라우저가 문자데이터를 객체데이터로 보여줌.
// localStorage.setItem('user', JSON.stringify(user))

// console에 출력해보기.
// JSON 객체로 변환
// console.log(JSON.parse(localStorage.getItem('user')))

// localStorage의 데이터를 지우기
// localStorage.removeItem('user')

// 저장한 데이터 수정하기
// localStorage에 데이터가 저장되어 있는 상황
const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 22
console.log(obj)

// obj는 객체데이터 이므로 문자화 해주어야 함.
localStorage.setItem('user', JSON.stringify(obj))