로컬스토리지 기본 사용법

1. 데이터 저장

localStorage.setItem(key, value)를 사용하여 데이터를 저장할 수 있다. 여기서 key는 문자열로 된 키, value는 문자열로 된 값이다.

localStorage.setItem('username', '장원영');

2. 데이터 읽기

localStorage.getItem(key)를 사용하여 데이터를 읽을 수 있다. 해당 키가 존재하지 않으면 null을 반환한다.

let username = localStorage.getItem('username');
console.log(username); // 장원영

3. 데이터 삭제

localStorage.removeItem(key)를 사용하여 특정 키의 데이터를 삭제할 수 있다.

localStorage.removeItem('username');

4. 모든 데이터 삭제

localStorage.clear()를 사용하여 로컬스토리지의 모든 데이터를 삭제할 수 있다.

localStorage.clear();

5. 저장된 데이터의 키 확인

localStorage.key(index)를 사용하여 인덱스에 해당하는 키를 얻을 수 있다.

localStorage.setItem('username', '장원영');
localStorage.setItem('email', 'wonyoung@ive.com');
let key = localStorage.key(0);
console.log(key); // 'username' (또는 'email', 순서는 브라우저에 따라 다를 수 있음)

6. 저장된 데이터의 개수 확인

localStorage.length를 사용하여 로컬스토리지에 저장된 데이터의 개수를 확인할 수 있다.

let length = localStorage.length;
console.log(length); // 2 (위에서 'username'과 'email'을 저장한 경우)

예제 코드

다음은 로컬스토리지를 사용하는 간단한 예제이다.

// 데이터 저장
localStorage.setItem('username', '장원영');
localStorage.setItem('email', 'wonyoung@ive.com');

// 데이터 읽기
let username = localStorage.getItem('username');
let email = localStorage.getItem('email');
console.log(username); // 장원영
console.log(email); // wonyoung@ive.com

// 데이터 삭제
localStorage.removeItem('username');

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

// 저장된 데이터의 키 확인
localStorage.setItem('username', '장원영');
localStorage.setItem('email', 'wonyoung@ive.com');
let firstKey = localStorage.key(0);
console.log(firstKey); // 'username' 또는 'email'

// 저장된 데이터의 개수 확인
let numberOfItems = localStorage.length;
console.log(numberOfItems); // 2

로컬스토리지는 브라우저에 데이터를 영구적으로 저장할 수 있는 간단하고 유용한 방법을 제공한다. 하지만 보안에 민감한 데이터는 로컬스토리지에 저장하지 않는 것이 좋다.