Web Storage 인공지능 연구실.

Presentation on theme: "Web Storage 인공지능 연구실."— Presentation transcript:

1 Web Storage 인공지능 연구실

2 Web Storage HTML 5 에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료 구조인 Web Storage(웹 스토로지) 스펙이 포함되었다 localStorage와 SessionStorage를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.

3 Web Storage '키/ 값' 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.

4 Cookie와의 차이점 쿠키는 매번 서버로 전송 된다 용량의 제한이 없다 영구 데이터 저장이 가능하다
웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다. Web Storage 는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이것은 네트워크 트래픽 비용을 줄여 준다는 주요한 장점이 되겠다 용량의 제한이 없다 쿠키는 개수와 용량에 있어 제한을 걸어 두고 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB 로 제한되어 있다. Web Storage 는 이러한 제한이 없다. 영구 데이터 저장이 가능하다 쿠키는 만료 일자를 지정하게 되어 있어 언젠가 제거된다. WebStorage 는 만료 기간의 설정이 없다. 즉 한번 저장한 데이터는 영구적으로 존재하는 것이다

5 localStorage와 SessionStorage
저장한 데이터를 (명시적으로) 지우지 않는 이상 영구적으로 보관한다 SessionStorage 데이터가 지속적으로 보관되지 않는다.이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징 되고 있는 브라우저 내에서만 데이터가 유지된다 localStorage는 브라우저를 종료해도 데이터는 보관되어 다음 번 접속에도 그 데이터를 사용할 수 있는 반면, SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다. 브라우저가 종료되면 세션 스토로지도 삭제된다는 것이다

6 브라우저 지원 현항 제공하는 브라우저(버전)별 Web Storage 지원 표이다

7 브라우저 지원 여부 체크

8 Web Storage 예제

9 Web Storage 예제

10 Web Storage 예제 크롬에서 오른쪽 버튼을 누른 뒤 요소 검사(N)

11 Web Storage 예제

12 Web Storage 예제

13 Web Storage 예제 Value에서 오른쪽 마우스 버튼을 누르게 되면 해당 값을 수정/삭제 할 수 있다.

14 Web Storage 예제 브라우저를 종료 후 다시 시작 할 경우 Local Storage 값은 유지 되는 반면, Session Storage는 값이 삭제 된다.

15 Web SQL Database HTML5에서는 Web Storage 이외에도 관계형 데이타베이스가 추가로 제공된다
Web SQL Database 를 지원하는 브라우저는 자체적으로 경량의 관계형 DB를 내장하고 있다 Web Storage의 경우 비교적 적은 양의 간단한 데이터를 저장하기에 적합한 로컬 저장소인 반면 Web SQL Database는 보다 구조적이고 체계화된 관계형 데이터를 대량으로 저장하기에 적합하다 Web SQL Database는 모바일 환경에 많이 채용된 경량의 무료 DB엔진인 SQLite를 기반으로 하고 있다

16 브라우저 지원 여부 체크

17 Web SQL Database 예제 OpenDatabase (DB명, DB버전, DB설명, DB크기)

18 Web SQL Database 예제

19 Web SQL Database 예제