데이터 저장소, JSON

Storage API

HTML5 JS API

 

데이터 저장소 개념

1. localStorage : 브라우저 간(여러 창을 띄운 상황), 탭 간 공유 가능한 저장소
2. sessionStorage: 해당 브라우저 탭에서만 사용 가능한 저장소

 

데이터 저장

• 키 - 값 쌍으로 관리
• 객체를 통으로 저장하고 싶다면 문자열(JSON포멧의 문자열)로 변환하여 저장
• → JSON.stringify(obj)

 

JSON

• Java Script Object Notation
• 객체 표기: {}
• 속성명: 값
• 배열(리스트) 표기 [ , , , ]

let a="{name: '김재환', age: 28}"; //문자열 
let p = JSON.parse(a);  //JSON 표기 -> 
p.name
p.age 

let p2={ //객체, local Storage에 저장 불가능 
	name: '이도현',
	phone: '010-0000-0000'
}
JSON.stringify(p2);

 

데이터 추가

• localStorage.setItem(key, value)
• sessionStorage

 

데이터 조회

• getItem(key)

 

데이터 삭제

• removeItem(key)

 

데이터 수정

• setItem(key, value)

 

Storage 전체 비우기

• clear()

 

전체 데이터 조회

• length ⇒ 데이터 항목의 수 파악
• key(index)⇒index에 해당하는 키 추출 → getItem(key)

 

부트스트랩

• 반응형 Web 사이트 개발을 지원하는 UI Framework, 재사용 가능한 스타일 정의해놓음
• 미디어 쿼리를 이용해서 조건에 따른 스타일을 사용

*반응형 Web 개발시 주의사항

• 크기: 상대 크기 활용

*사용하기 위한 setting

1. CDN 방식 활용 → 파일 크기에 따라 압축/비압축 나누어서 지원
2. Package Manager Tool 활용

*중단점