(JavaScript)localStorage, JSON

 todoList 코드를 작성하며 localStorage와 JSON에 대해 배웠다. 정리해보려고 한다.

 

 

localStorage

 localStorage는 HTML5에서 추가된 웹 스토리지 API 중 하나로, 브라우저에 데이터를 로컬로 저장할 수 있도록 해 준다. (localStorage 객체는 window 객체의 프로퍼티로 정의되어 있다). 키(key)와 값(value)을 사용하여 데이터를 저장하고 가져온다. 키(key)와 값(value)은 문자열만 저장할 수 있다.

 

데이터 저장하기

 localStorage에 데이터를 저장하려면 setItem 메소드를 사용하면 된다. setItem 메소드는 키(key)와 값(value)을 매개변수로 받아서 localStorage에 저장한다. 

localStorage.setItem('key', 'value');

 

데이터 가져오기
 localStorage에 저장된 데이터를 가져오려면, getItem 메소드를 사용하면 된다. getItem 메소드는 키(key)를 매개변수로 받아서 해당 키(key)의 값(value)을 반환한다.

const value = localStorage.getItem('key');

 

데이터 삭제하기
 localStorage에서 데이터를 삭제하려면, removeItem 메소드를 사용하면 된다. removeItem 메소드는 삭제하려는 데이터의 키를 인자로 받아서 localStorage에서 해당 키(key)와 값(value)을 전부 삭제한다.

localStorage.removeItem('key');

 

 localStorage에는 저장 가능한 데이터 크기 제한이 있다. 대부분의 브라우저에서는 5~10MB 이내로 제한되어 있다. 또한  동일한 도메인에서만 사용할 수 있다.

 localStorage는 브라우저 내부에 저장되는 데이터로, 사용자가 브라우저를 닫아도 데이터가 남아있을 수 있다는 점과, 사용자가 브라우저를 이용할 때 다른 사용자가 해당 데이터에 접근할 수 있다는 점 때문에 보안상 위험할 수 있다.

 또한, localStorage는 브라우저의 JavaScript 코드에서 접근 가능하기 때문에, 악의적인 코드를 통해 localStorage에 저장된 데이터를 읽어 들이는 것이 가능하다. 민감한 정보는 서버 측에서 처리하고, localStorage에는 세션 정보나 사용자가 자주 이용하는 데이터 등의 민감하지 않은 정보만 저장하는 것이 좋다. 또한, localStorage를 이용할 때는 암호화를 이용하여 보안성을 강화하는 것이 좋다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

JSON

 JSON은 JavaScript에서 사용하는 객체의 표현 방식을 기반으로 만들어진 경량 데이터 형식이다. 형식은 key-value 쌍으로 이루어진 객체와 값의 배열로 구성된다. 이러한 JSON 형식은 다른 프로그래밍 언어에서도 쉽게 사용될 수 있기 때문에, 데이터 교환의 표준 형식으로 널리 사용된다. JSON은 String 형태로 전송된다.

 

 

 다음과 같은 JSON 객체를 가정한다.(모든 key와 문자열은 쌍따옴표("")로 둘러싸여 있어야 한다)

{
     "id":"1",
     "text": "hello world",
     "checked": false
}

 

 

 이 JSON 객체를 JavaScript에서 사용하려면 JSON.parse()를 이용하여 객체로 변환해야 한다.

const jsonStr = '{"id":"1","text":"hello world", "checked":false}';

const jsonObj = JSON.parse(jsonStr);

console.log(jsonObj.id); // 1
console.log(jsonObj.text); // hello world

 

 

 JavaScript 객체를 JSON 형식으로 변환하려면 JSON.stringify()를 사용하면 된다.

const obj = {
     "id":"1",
     "text": "hello world",
     "checked": false
};

const jsonStr = JSON.stringify(obj);

console.log(jsonStr);
//{"id":"1","text":"hello world","checked":false}