7. [Javascript] localStorage를 이용한 로컬 DB 활용하기

로컬 스토리지(Local Storage)는 웹 브라우저에서 제공하는 클라이언트 측 웹 스토리지 기능으로, 

작은 데이터를 사용자의 로컬 컴퓨터에 영구적으로 저장할 수 있습니다. 

 

자바스크립트의 localStorage 객체를 사용하여 로컬 스토리지에 데이터를 저장하고 검색할 수 있습니다.

---

1. 값 저장

// 로컬 스토리지에 데이터 저장
localStorage.setItem('username', 'John');

// 객체 형태의 데이터 저장
var user = {
  name: 'Jane',
  age: 25,
};
localStorage.setItem('user', JSON.stringify(user));

위의 코드에서 setItem 메서드를 사용하여 'username' 키로 'John' 값을, 'user' 키로 user 객체를 문자열로 변환하여 저장합니다. 

localStorage 객체는 데이터를 문자열로 저장하기 때문에, 객체를 저장하기 위해 JSON.stringify 메서드를 사용합니다.

---

2. 값 가져오기

// 로컬 스토리지에서 데이터 가져오기
var username = localStorage.getItem('username');
console.log(username); // 출력: 'John'

var userString = localStorage.getItem('user');
var user = JSON.parse(userString);
console.log(user.name); // 출력: 'Jane'
console.log(user.age); // 출력: 25

위의 코드에서 getItem 메서드를 사용하여 'username' 키와 'user' 키에 저장된 값을 가져옵니다. 

getItem 메서드는 저장된 데이터를 문자열 형태로 반환하기 때문에, 객체를 가져온 후에는 JSON.parse 메서드를 사용하여 다시 객체로 변환합니다.

---

3. 값 수정하기

// 기존 데이터 가져오기
var userString = localStorage.getItem('user');
var user = JSON.parse(userString);

// 데이터 수정
user.age = 30;

// 수정된 데이터 저장
localStorage.setItem('user', JSON.stringify(user));

이미 존재하는 키에 대해 setItem 메서드를 호출하면 해당 키의 값이 업데이트됩니다.

위의 코드에서 getItem 메서드로 'user' 키의 데이터를 가져온 후에, 해당 데이터를 수정하고 다시 setItem 메서드를 사용하여 업데이트된 데이터를 저장합니다. 

기존 키에 대해 setItem 메서드를 호출하면 해당 키의 값이 수정됩니다.

---

4. 값 삭제하기

// 로컬 스토리지에서 데이터 삭제
localStorage.removeItem('username');

// 모든 데이터 삭제
localStorage.clear();

removeItem 메서드를 사용하여 특정 키의 데이터를 삭제하고, 

clear 메서드를 사용하여 로컬 스토리지의 모든 데이터를 삭제할 수 있습니다.

---

5. Array로 변환하기

// 배열 데이터
var fruits = ['사과', '바나나', '오렌지'];

// 배열을 문자열로 변환하여 저장
localStorage.setItem('fruits', JSON.stringify(fruits));

// 저장된 배열 데이터 가져오기
var storedFruitsString = localStorage.getItem('fruits');
console.log(storedFruitsString); // 출력: '["사과","바나나","오렌지"]'

//JSON.parse로 Array 변환
var storedFruits = JSON.parse(storedFruitsString);
console.log(storedFruits); // 출력: ['사과', '바나나', '오렌지']

위의 코드에서 fruits 배열을 JSON.stringify() 메서드를 사용하여 문자열로 변환한 후에 'fruits' 키로 로컬 스토리지에 저장합니다. 

저장된 배열 데이터를 가져올 때는 getItem() 메서드를 사용하여 문자열로 가져온 후, JSON.parse() 메서드를 사용하여 다시 배열로 변환합니다.