Javascript - LocalStorage

01. LocalStorage 기본 API

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

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

// 저장된 키/값 쌍의 개수
localStorage.length;

엄밀하게는 window.localStorage를 사용해야하지만 줄여서 사용할 수 있다.

 

02. with Json

localStorage는 기본적으로 문자열 데이터 밖에 저장할 수 없다.

이러한 웹 스토리지의 성질 때문에 객체형 데이터를 저장할 때 다음과 같이 큰 낭패를 보게 될 수도 있다.

> localStorage.setItem('obj', {a: 1, b: 2})
undefined
> localStorage.getItem('obj')
"[object Object]"

그렇기 때문에 위와 같은 문제를 피하기 위해서 JSON형태로 데이터를 일고 쓰는 방법을 많이 사용하고 있다.

> localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}

위와 같이 로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화(serialization)하고,

읽은 데이터를 JSON 형태로 역직렬화(deserialization)해주면 원본의 데이터를 그대로 얻을 수 있다.

 

**

직렬화

JSON.stringfy(JSON형식의 객체)

: 객체 => 문자열로 변환하며, 이를 직렬화(serialize)라고 한다.

: 통신할 때는 문자열로 직렬화하여 주고 받는 것이 안전하다.

 

역직렬화

JSON.parse(JSON형식의 문자열)

: 문자열 => 객체로 변환하며, 이를 역직렬화(deserialize)라고 한다.

: 통신으로 받은 문자열은 객체로 역직렬화하여 사용하는 겻이 편리하다.

 

 

 

배열형 데이터를 로컬 스토리지에 저장할 때도 동일한 방법을 사용해 문제를 예방할 수 있다.

 localStorage.setItem('nums', JSON.stringify([1, 2, 3]))
undefined
> JSON.parse(localStorage.getItem('nums'))
[1, 2, 3]

 

데이터를 없앨 때는 localStorage.removeItem('key')로 하나씩 삭제할 수 있고,

localStorage.clear()로 전체를 삭제해줄 수 있다.

 

번외 update

	const onDataUpdate = (id, text) => {
    const UpdateData = data.find((item) => item.id === id)
    UpdateData.text = text;
    localStorage.setItem('dataList', JSON.stringify(data))
  }

update할 데이터의 id 값을 가져와 id 값이 일치한 데이터의 text 값을 변경한다.

Todo list같은거 만들 때 수정시에 사용가능 할 것 같다.

 

자료 출처 : https://www.daleseo.com/js-web-storage/

[자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법