9/9 TIL

<목차>

1. localStorage란?

---

1. localStorage란?

• localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있다.
  저장한 데이터는 세션간에 공유가 가능하다. => 세션이 바뀌어도 저장한 데이터가 유지된다.
• localStorage에는 '문자열'만을 저장할 수 있다.

1-1) localStorage의 method

• setItem() : key,value를 추가한다.
• getItem() : value를 읽어준다.
• removeItem() : item을 삭제한다.
• clear() : 도메인 내의 localStorage 값을 삭제한다.
• length() : 전체 item 개수
• key() : index로 key값을 찾기

1-2) localStorage에 item 추가 및 읽기

• setItem()

  window.localStorage.setItem(key, value)

• getItem()

  window.localStorage.getItem(key)

window.localStorage.setItem('name', 'Jun');
window.localStorage.setItem('age', '28');
// //setItem() 함수를 사용하여 localStorage에 key,value에 저장한다.

const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age');
//getItem() 함수에 key를 전달하여 localStorage에 저장된 값을 불러온다.

< localStorage에 객체, 배열 저장하기 >

// 로컬스토리지에 저장할 객체
const obj = {
  name : 'Jun',
  age : 28,
}

// 로컬스토리지에 저장할 배열
const arr = [1,2,3];

// 객체 ,배열을 문자열로 변환시켜주는 JSON.stringify
const objString = JSON.stringify(obj);
const arrString = JSON.stringify(arr);

// setItem() 사용

window.localStorage.setItem('person', objString);
window.localStorage.setItem('nums', arrString);

// getItem()

const personString = window.localStorage.getItem('person');
const numsString = window.localStorage.getItem('nums');


//문자열로 변환했던 객체,배열을 다시 원래대로 돌려주는 JSON.parse

const personObj = JSON.parse(personString);
const numsArr = JSON.parse(numsString);

1-3) localStorage에 값 제거

window.localStorage.removeItem(key);

//setItem
window.localStorage.setItem('name', 'Jun');window.localStorage.setItem('age', '28'); 
// removeItem
window.localStorage.removeItem('name');window.localStorage.removeItem('grade'); 
// getItem
const name = window.localStorage.getItem('name');const age = window.localStorage.getItem('age'); 

1-4) localStorage에 값 전체 삭제

window.localStorage.clear();

// setItem
window.localStorage.setItem('name', 'Jun');window.localStorage.setItem('age', '28'); 
// clear
window.localStorage.clear(); 
// getItem
const name = window.localStorage.getItem('name');const age = window.localStorage.getItem('age'); 

1-5) localStorage에 아이템 개수 구하기

window.localStorage.length;

// setItem
window.localStorage.setItem('name', 'Jun');window.localStorage.setItem('age', 28); 
// localStorage item 갯수
const length = window.localStorage.length