반응형 javascript6 자바스크립트 IndexedDB 코드 IndexedDB는 서버가 아닌 클라이언트 측(웹 브라우저)에 데이터를 저장할 수 있는 기술이다. 많은 양의 데이터를 영구적으로 저장 할 수 있으며, 비동기식으로 key - value 객체(Object) 형태로 데이터를 저장하게 된다.(※ 참고: IndexedDB의 용량 제한은 하드디스크(HDD)의 50% 이다.)# 데이터베이스(DB) 생성# 객체 저장소(Object Store) 생성 (여러개의 객체 저장소 생성 가능)let DB;let DB_VERSION = 1; // 데이터베이스 버전.let DB_NAME = 'INDEXED_DB'; // 데이터베이스 이름.let OBJECT_STORE_NAME = 'OBJECT_STORE'; // 객체 저장소 이름.// 데이터베이스 생성.let CREATE_DB.. 2024. 4. 29. HTML 데이터 속성(data-)에서 JSON 사용하기 HTML 데이터 속성(data-)에서 JSON을 사용하려면 아래와 같은 코드를 사용하면 된다. ※ 주의할 점은 HTML 데이터 속성(data-)값의 바깥 영역을 작은 따옴표( ' )로 감싸고, JSON 데이터의 key값과 value값을 큰 따옴표( " )로 감싸 주어야 한다. 그리고 JSON 데이터의 마지막에는 콤마/쉼표( , )를 찍지 않는다. 꼭 아래와 같은 JSON 코드 형식에 맞게 작성해 주어야만 에러 없이 자바스크립트에서 JSON 파싱이 가능하다. 2024. 4. 29. 자바스크립트 localStorage 로컬스토리지(localStorage)는 웹 브라우저에 데이터값을 반영구적으로 저장할수 있는 기능이다. 웹브라우저가 종료 되어도 데이터값이 그데로 유지가 되며 최대 5MB까지 저장 가능하다. [데이터 저장]localStorage.key값 = "value값";localStorage["key값"] = "value값";localStorage.setItem("key값", "value값"); [데이터 불러오기]let value = localStorage.key값;let value = localStorage["key값"];let value = localStorage.getItem("key값"); [데이터 삭제]localStorage.removeItem("key값"); [모든 데이터 삭제]localStorage.cle.. 2024. 4. 29. 자바스크립트 setInterval, clearInterval setInterval 함수는 설정된 시간마다 계속 반복 되는 함수이다. let interval = setInterval(function(){ // 실행 코드 작성 (1000 == 1초 마다 실행) }, 1000); setInterval 함수 실행를 중단 하려면 clearInterval를 실행하면 된다.clearInterval(interval); 2024. 4. 29. 자바스크립트 setTimeout, clearTimeout setTimeout 함수는 설정된 시간이 경과되면 단 한번만 실행 되는 함수이다.let setTime = setTimeout(function(){ //실행 코드 작성 (3000 == 3초 뒤에 실행)}, 3000); setTimeout 함수 실행을 (중간에) 취소하려면 clearTimeout 을 실행하면 된다.clearTimeout(setTime);[jQuery 코드]$(document).delay(3000).queue(function(next){ //실행 코드 작성 (3000 == 3초 뒤에 실행) next(); }); 2024. 4. 29. 자바스크립트 Resize Event Resize Event는 "웹 브라우저" 화면 크기가 변경될 때 실행되는 이벤트이며, 주로 반응형 웹을 제작할 때 사용 됩니다.let resizeEvent= null;window.addEventListener("resize", function(){ clearTimeout(resizeEvent); resizeEvent = setTimeout(resizeEnd, 300); // 0.3초 뒤에 실행});function resizeEnd(){ //실행 코드 작성 let width = document.body.clientWidth; console.log(width);} [jQuery 코드]$(window).resize(function(){ if(this.resizeTO){ clear.. 2024. 4. 29. 이전 1 다음 반응형
