웹 스토리지 API (Web Storage API) Client side Database 데이터는 서버가 아닌 각 사용자의 브라우저에 보관됩니다 간단한 데이터를 사용자의 컴퓨터나 기기에 로컬로 저장하는 방법에 대한 표준을 정의 key-value 형식으로 저장됩니다. Web Storage vs Cookie Web Storage 지원 이전부터 사용된 Cookie의 한계점을 개선한 것 HTML5에서는 쿠키의 역할을 하면서 단점을 보완 구분Web StorageCookie크기 제한크롬, 사파리, 파이어폭스, 오페라(5MB) 인터넷 익스플로러(10MB)하나의 사이트에 저장할 수 있는 크기가 4KB 제한되어 있습니다서버로 자료 전송서버로 데이터 전송하지 않습니다.HTTP 요청에 자동으로 포함되어 서버로 전송됩니다.개..

DataTransfer· DataTransfer 객체는 Drag & Drop API 를 사용하는데 있어서 반드시 있어야 하는 객체입니다.· DataTransfer 객체는 Drag & Drop 되는 대상 Data 를 담는 역할을 합니다. 데이터 전송 기능에 관한 메서드

드래그 앤 드롭의 이벤트· 드래그(drag) 측에서 발생하는 이벤트· 드롭(drop) 측에서 발생하는 이벤트 드래그(drag) 측에서 발생하는 이벤트 이벤트 설명 dragenter 드래그 요소가 드롭 요소에 들어왔을 때 드롭 요소에서 발생 dragleave 드래그 요소가 드롭 요소에서 나갔을 때 드롭 요소에서 발생 dragover 드래그 요소가 드롭 요소 위에서 드래그되고 있을 때 드롭 요소에서 연속해서 발생 drop 드래그 요소가 드롭 요소에 드롭되었을 때 드롭 요소에서 발생

draggable 속성 · img요소와 href 속성이 마크업된 요소는 원래 드래그할 수 있는 요소로 규정되어 있습니다. · img요소와 href속성이 마크업된 요소들외에 모든 요소를 HTML5에서는 draggable 속성을 true로 지정함으로써 드래그할 수 있도록 규정하고 있습니다. · HTML5에 새롭게 추가된 draggable속성은 true, false, 값 없음 값을 가질 수 있습니다. draggable 속성 지정 · draggable은 드래그 대상이 웹 애플리케이션 안의 요소라면 그 요소에 draggable속성을 지정합니다. · draggable 속성이 true 이면 drag 할 수 있는 것이고, false 면 drag를 하지 못합니다. · 값을 지정하지 않았을 때는 기본 동작을 그대로 사용한..

세션 스토리지(Session Storage)· 하나의 창이나 탭에 한정된 데이터를 보관할 수 있습니다.· 사용자가 같은 사이트를 두 개의 창에서 접속하고 있더라도, 각 창은 자체적인 개별 세션 스토리지 객체를 가지게 되어, 데이터를 별도로 유지하게 됩니다. · 특정 사이트에 접속해서 사용자 세션이 지속되는 동안에만 세션 스토리지도 지속됩니다.· 브라우저가 열려 있는 동안 데이터를 저장하고 사용할 수 있습니다.· 브라우저가 완전히 종료된 후에는 데이터도 소멸됩니다. 브라우저가 닫히면 저장된 데이터는 사라집니다. Session Storage 접근· 같은 도메인더라도 윈도우가 다르면 다른 스토리지를 사용하며 같은 윈도우에 서로 다른 도메인이 존재할 경우 데이터는 별도로 저장됩니다.· 모든 세션이 종료하게 되면..

Local Storage 메소드 localStorage.setItem('name', first_value); localStorage.name = first_value; 저장된 데이터 읽기 localStorage.setItem("name", "Hong"); localStorage.name="Hong"; localStorage["name"]="Hong"; getItem(key) localStorage.removeItem("name"); delete localStorage.name; delete localStorage["name"];