Development/Web, WWW(447)
-
DataTransfer, 데이터 전송 기능에 관한 메서드
DataTransfer· DataTransfer 객체는 Drag & Drop API 를 사용하는데 있어서 반드시 있어야 하는 객체입니다.· DataTransfer 객체는 Drag & Drop 되는 대상 Data 를 담는 역할을 합니다. 데이터 전송 기능에 관한 메서드
-
드래그 앤 드롭의 이벤트 - 드래그(drag) 측에서 발생하는 이벤트, 드롭(drop) 측에서 발생하는 이벤트
드래그 앤 드롭의 이벤트· 드래그(drag) 측에서 발생하는 이벤트· 드롭(drop) 측에서 발생하는 이벤트 드래그(drag) 측에서 발생하는 이벤트 이벤트 설명 dragenter 드래그 요소가 드롭 요소에 들어왔을 때 드롭 요소에서 발생 dragleave 드래그 요소가 드롭 요소에서 나갔을 때 드롭 요소에서 발생 dragover 드래그 요소가 드롭 요소 위에서 드래그되고 있을 때 드롭 요소에서 연속해서 발생 drop 드래그 요소가 드롭 요소에 드롭되었을 때 드롭 요소에서 발생
-
드래그 앤 드롭 - draggable 속성, 기본 동작
draggable 속성 · img요소와 href 속성이 마크업된 요소는 원래 드래그할 수 있는 요소로 규정되어 있습니다. · img요소와 href속성이 마크업된 요소들외에 모든 요소를 HTML5에서는 draggable 속성을 true로 지정함으로써 드래그할 수 있도록 규정하고 있습니다. · HTML5에 새롭게 추가된 draggable속성은 true, false, 값 없음 값을 가질 수 있습니다. draggable 속성 지정 · draggable은 드래그 대상이 웹 애플리케이션 안의 요소라면 그 요소에 draggable속성을 지정합니다. · draggable 속성이 true 이면 drag 할 수 있는 것이고, false 면 drag를 하지 못합니다. · 값을 지정하지 않았을 때는 기본 동작을 그대로 사용한..
-
세션 스토리지(Session Storage), Session Storage 접근, 데이터 저장하기, 저장된 데이터 읽기
세션 스토리지(Session Storage)· 하나의 창이나 탭에 한정된 데이터를 보관할 수 있습니다.· 사용자가 같은 사이트를 두 개의 창에서 접속하고 있더라도, 각 창은 자체적인 개별 세션 스토리지 객체를 가지게 되어, 데이터를 별도로 유지하게 됩니다. · 특정 사이트에 접속해서 사용자 세션이 지속되는 동안에만 세션 스토리지도 지속됩니다.· 브라우저가 열려 있는 동안 데이터를 저장하고 사용할 수 있습니다.· 브라우저가 완전히 종료된 후에는 데이터도 소멸됩니다. 브라우저가 닫히면 저장된 데이터는 사라집니다. Session Storage 접근· 같은 도메인더라도 윈도우가 다르면 다른 스토리지를 사용하며 같은 윈도우에 서로 다른 도메인이 존재할 경우 데이터는 별도로 저장됩니다.· 모든 세션이 종료하게 되면..
-
Local 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"];
-
로컬 스토리지(Local Storage), Local Storage 접근, LocalStorage 활용
로컬 스토리지(Local Storage)· 세션 스토리지와 달리 로컬 스토리지를 이용하면 브라우저를 통해 사용자의 컴퓨터에 데이터를 지속적으로 저장할 수 있습니다. · 브라우저를 통해 사용자 컴퓨터의 로컬스토리지에 데이터를 저장하고 다시 같은 사이트를 방문했을 때 로컬 스토리지에 저장된 모든 데이터를 사용할 수 있습니다.· 즉, 브라우저가 종료된 후에도 데이터는 유지됩니다.· key:value 쌍으로 저장됩니다. Local Storage 접근도메인이 다르면 서로의 Local Storage에 접근할 수 없습니다 다음(DAUM)의 웹 페이지에서 네이버(NAVER) 웹 페이지의 Local Storage에 접근할 수 없습니다. 같은 도메인일 경우 Local Storage를 공유할 수 있습니다. LocalStor..