localStorage

localStorage?

localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다.

저장한 데이터는 세션간에 공유됩니다.

즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다.

localStorage 사용방법

• setItem() - key, value 추가
• getItem() - value 읽어 오기
• removeItem() - item 삭제
• clear() - 도메인 내의 localStorage 값 삭제
• length - 전체 item 갯수
• key() - index로 key값 찾기

1. setItem()

window.localStorage.setItem(key, value)  

2. getItem()

window.localStorage.getItem(key)  

setItem, getItem 사용

localStorage.setItem('user','ingoo')
console.log(localStorage.getItem('user'))

결과 모습

// setItem

window.localStorage.setItem('name', 'anna');

window.localStorage.setItem('age', '20');

// getItem

const name = window.localStorage.getItem('name');

const age = window.localStorage.getItem('age');

// 결과 출력

document.write(name); // anna

document.write('<br/>');

document.write(age); // 20  

localStorage에 객체, 배열 저장

// localStorage에 저장할 객체

const obj = {

name : 'anna',

age : 20

}

// localStorage에 저장할 배열

const arr = [1, 2, 3];

// 객체, 배열을 JSON 문자열로 변환

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 문자열을 객체, 배열로 변환

const personObj = JSON.parse(personString);

const numsArr = JSON.parse(numsString);

// 결과 출력

document.write(personString); // {"name":"anna","age":20}

document.write('<br/>');

document.write(personObj); // [object Object]

document.write('<br/>');

document.write(numsString); // [1,2,3]

document.write('<br/>');

document.write(numsArr); // 1,2,3

document.write('<br/>');  

다음번에~
3. removeItem()
4. clear()
5. length
6. key()