06 Local Storage

1 Local Storage

• 웹 스토리지의 한 종류로 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않음
• 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있음
• 다른 브라우저 간에는 스토리지가 호환되지 않음
• JavaScript를 이용하거나 브라우저 캐시또는 로컬 저장 데이터를 지워야만 사라짐

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

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

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

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

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

 

1) Session Storage

• 웹 스토리지의 한 종류로 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐
• 세션에 한정에서만 데이터를 저장
• 데이터를 서버로 전송하지 않음
• 저장공간이 쿠키보다 큼 (최대 5MB)
• 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸

 

2 Web Storage vs Cookies

1) Cookies

• 최대 4KB의 용량을 가진 문자열 텍스트 파일
• Cookies를 사용해 유저의 신원을 확인하여 모든 페이지에서 재인증을 거치지않아도 되게됨
• Seesion cookies: 만료일을 포함하지 않으며, 브라우저나 탭이 열려있는 동안에만 저장됨
• Persistent cookies: 만료일을 가지며, 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제
• 사용자의 하드에 저장되어 보안위험이 있음

2) Web Storage vs Cookies

• Storage는 쿠키의 단점을 보완해서 만든 기술
• 서버의 자원이 사용하므로 서버의 공간이 필요함
• 기기마다 차이는 있으나 모바일 2.5MB, 데스크탑 5MB~10MB정도 저장 가능
• 쿠키 보다 보안이 우수하며 많은 정보를 담을 수 있음

 

2 JSON

• JavaScript Object Notation
• 데이터를 문자열의 형태로 나타내기 위해서 사용
• 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용
• XML과 같은 데이터 포멧을 대체한 이유는 가독성이 좋기 때문임
• 객체, 배열, 숫자, 문자열, 불리언(boolean), 널(null)과 같은 다양한 데이터를 나타낼 수 있음
• JSON의 문법은 매우 간단하고 자바스크립트와 상당히 유사함
• JavaScript 객체로 변환된 데이터는 .나 []기호를 사용하여 각 속성에 접근할 수 있음
• 자바스크립트 메소드: JSON.stringify(), JSON.parse(), toJSON()

{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}

 

1) JSON.stringify()

• JavaScript 값이나 객체를 JSON 문자열로 변환
• value : JSON 문자열로 변환할 값
• relacer : 문자열화 동작 방식을 변경하는 함수, null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함됨
• space : 가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는데 사용되는 것 number이면 스페이스 수를 나타내고 String이면 그 문자열이 공백으로 사용

JSON.stringify(value[, replacer[, space]])

2) JSON.parse()

• JSON 객체를 String 객체로 변환
• text : JSON으로 반환할 문자열
• reviver : 함수라면 번환 결과를 반환하기 전 이 인수에 전달하여 반환함

JSON.parse(text[, reviver])