[JavaScript] localstorage 사용법과 stringify/parse 함수 🤔

 

1. localstorage란? 

웹 브라우저에서 제공하는 클라이언트 사이드 저장소
웹 애프리케이션에서 데이터를 브라우저에 저장하고 다른 페이지에서도 접근 가능하게 할 수 있다.

localstorage는 `key - value` 형태로 데이터를 저장하며, 저장된 데이터는 브라우저가 닫혀도 유지된다.
이러한 특징 때문에 웹 애플리케이션에서 사용자 정보, 설정 값, 쇼핑카드 등을 저장하기에 적합하다.

localstorages는 javascript의 API로 다음과 같이 사용 할 수 있다.

localStorage는 일반적으로 5-10MB의 용량을 제공하며, 서버와의 통신이 필요하지 않으므로 더 빠르고 경제적이다. 하지만 브라우저에서 데이터를 직업 다루기 때문에 보안에 취약할 수 있으므로, 민감한 정보를 저장하는 경우에는 암호화나 보안 기능을 추가해야 한다.

 

 

2. localStorage 추가 , 읽기

• localStorage.setItem(key,value) - key, value 쌍 추가
• localStorage.getItem(key) - key에 해단하는 value 읽어 오기

// 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

 

 

3. localStorage 값 삭제 하기

• localStorage.removeItem(key) - key에 해당하는 key-value 쌍을 삭제한다. 

// removeItem
window.localStorage.removeItem('name');
window.localStorage.removeItem('age');

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


// 결과 출력
document.write(name); // null
document.write('<br/>');
document.write(age); // 20

 

4. localStorage에 값 전체 삭제하기

• localStorage.clear() - 도메인의 모든 아이템을 삭제한다. 

// clear
window.localStorage.clear();
 
// getItem
const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age');
 
// 결과 출력
document.write(name); // null
document.write('<br/>');
document.write(age); // null

 

5. localStorage의 아이템 갯수 구하기/key 이름 찾기

• localStorage.length  
• localStorage.key(index) 

// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', 20);
 
// localStorage item 갯수
const length = window.localStorage.length
 
// 결과 출력
document.write(length); // 2

// key
const key_1 = window.localStorage.key(0);
const key_2 = window.localStorage.key(1);
 
// 결과 출력
document.write(key_1); // age
document.write('<br/>');
document.write(key_2); // name

 

6. localStorage에 객체, 배열 저장하는 경우

 

localStorage에서는 문자열 외에더 객체, 배열, 불리언 등의 자료형도 저장할 수 있지만 localStorage는 브라우저에서 제공하는 클라이언트 사이드 저장소이기 때문에, 데이터를 저장할 때는 반드시 문자열로 변환해야한다.

이를 위해 JSON.stringify() 함수를 사용하여 객체나 배열등을 문자열로 변환 후 localStorage에 저장 할 수 있다.

불러올 때는 JSON.parse() 함수를 사용해서 다시 객체나 배열로 변환할 수 있다.

// 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/>');

 

 

 

+  전체 key , value 가져오기

for문, for...in 가능 ( 단, for...in 문은 built in-property-length,clear,key,setitem-까지 가져오기 때문에 hasOwnProperty함수를 써야한다)

 

---

 

참조  : https://hianna.tistory.com/697