[ javascript ] 24. window.localStorage

window.localStorage

 

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다.

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

localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)

 

 

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

 

 

https://developer.chrome.com/docs/devtools/storage/localstorage?utm_source=devtools&hl=ko

로컬 저장소 보기 및 수정  |  Chrome DevTools  |  Chrome for Developers

 

자바스크립트 localStorage 객체

HTML5 사양에서는 localStorage웹 브라우저에 만료 날짜 없이 데이터를 저장하는 방법을 도입했습니다.
즉, 브라우저 창을 닫은 후에도 브라우저에 저장된 데이터는 유지됩니다.
저장된 데이터는 localStorage원본에 바인딩됩니다. 

 

참고  : https://fullstack-eun.tistory.com/64

[ javascript ] 19. Object , JSON, Spread연산자, 나머지연산자

 

• setItem(name, value) – key, value 추가
• removeItem(name) – 항목 제거, 이름-값 쌍 제거 
• getItem(name) – 항목을 읽어오기
• key(index) – 지정된 숫자 위치에 있는 값의 이름을 가져옵니다.
• clear() – 모든 값 삭제

 

1) setItem()  : setItem(name, value) 

이름-값 쌍 저장
window.localStorage.setItem('theme','dark');

 

2) localStorage.length : 개수 

console.log(window.localStorage.length);

 

 

3) getItem() :  키로 값을 가져오기 - getItem(name)

window.localStorage.getItem('theme'); // 'dark'

 

 

4) RemoveItem() : 키로  이름-값 쌍을 제거  - removeItem(name)

localStorage.removeItem('theme');

 

 

예) 항목추가 - Object.keys 

localStorage.setItem('theme','#000');
localStorage.setItem('backgroundColor','#fff');
localStorage.setItem('color','#333');


let keys = Object.keys(localStorage);
for(let key of keys) {
  console.log(`${key}: ${localStorage.getItem(key)}`);
}

 

예)

// setItem
window.localStorage.setItem('name', 'ezen');
window.localStorage.setItem('age', '22');

//getIem
const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age'); 

console.log( name , age );

 

 

# JSON.stringify()

 

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify() - JavaScript | MDN

 

# JSON.parse()

 

JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

JSON.parse() - JavaScript | MDN

 

** localStorage 에는 문자열만 저장됩니다. 객체나 배열을 저장하기 위해서는 객체를 문자열로 변환해서 저장해야 합니다.

JSON.stringify() 함수를 사용하여 객체와 배열을 JSON 문자열로 변환하였습니다.

 

console.log(JSON.stringify({ x: 5, y: 6 }));
// Expected output: '{"x":5,"y":6}'

console.log(
  JSON.stringify([new Number(3), new String('false'), new Boolean(false)]),
);
// Expected output: '[3,"false",false]'

console.log(JSON.stringify({ x: [10, undefined, function () {}, Symbol('')] }));
// Expected output: '{"x":[10,null,null,null]}'

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// Expected output: '"2006-01-02T15:04:05.000Z"'

 

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 42

console.log(obj.result);
// Expected output: true

 

 

예) localStorage 문자열로 저장

const obj = {
    backgroundColor: '#fff',
    color: '#111',
    theme: 'light'
};
localStorage.setItem('obj', JSON.stringify(obj));
console.log(localStorage.getItem('obj'));

저장
'{"backgroundColor":"#fff","color":"#111","theme":"light"}'

 

 

다시 객체로 변환

//JSON.parse()

let objS = JSON.parse(localStorage.getItem('obj'));
console.log(objS);

 

 

 

개발모드