\ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc744 \ud560 \ub54c, \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294 \uac83\uc740 \ud544\uc218\uc801\uc778 \uc694\uc18c\uc785\ub2c8\ub2e4. Apache Cordova\ub294 \uc6f9 \uae30\uc220\uc744 \uc774\uc6a9\ud558\uc5ec \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub294 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ub370\uc774\ud130 \uc800\uc7a5\uc744 \uc704\ud574 \ub2e4\uc591\ud55c \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0(Local Storage)\uc640 IndexedDB\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\uace0 \uad00\ub9ac\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574\uc11c \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d \uc81c\uacf5\ud558\ub294 \uac04\ub2e8\ud55c Key-Value \uc800\uc7a5\uc18c\uc785\ub2c8\ub2e4. Apache Cordova\ub294 \ud45c\uc900 \uc6f9 API\ub97c \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0, \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc811\uadfc\ud558\uae30 \ub9e4\uc6b0 \uc27d\uace0 \uc9c1\uad00\uc801\uc785\ub2c8\ub2e4.<\/p>\n
\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc0ac\uc6a9\uc790 \uc124\uc815\uc744 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc800\uc7a5\ud558\uace0 \ubd88\ub7ec\uc624\ub294 \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n IndexedDB\ub294 \ub300\ub7c9\uc758 \uad6c\uc870\ud654\ub41c \ub370\uc774\ud130\ub97c \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \uc800\uc7a5\ud558\uae30 \uc704\ud574 \ub9cc\ub4e4\uc5b4\uc9c4 \ube44\ub3d9\uae30\uc2dd \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc785\ub2c8\ub2e4. \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ubcf4\ub2e4 \ub354 \ub9ce\uc740 \uc591\uc758 \ub370\uc774\ud130 \ucc98\ub9ac\uc640 \ubcf5\uc7a1\ud55c \ub370\uc774\ud130 \uad6c\uc870\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n IndexedDB\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uba3c\uc800 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc0dd\uc131\ud558\uace0, \uac1d\uccb4 \uc800\uc7a5\uc18c\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uc800\uc7a5\ud558\uace0 \ubd88\ub7ec\uc624\ub294 \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n Apache Cordova\ub97c \uc0ac\uc6a9\ud55c \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0\uc11c\ub294 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc640 IndexedDB\uc640 \uac19\uc740 \ub2e4\uc591\ud55c \uc800\uc7a5\uc18c \uae30\uc220\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub294 \uac04\ub2e8\ud55c Key-Value \uc800\uc7a5\uc18c\ub85c \uc801\ud569\ud558\uc9c0\ub9cc, \ub300\ub7c9\uc758 \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud574\uc57c \ud560 \uacbd\uc6b0 IndexedDB\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. \uac01\uac01\uc758 \ud2b9\uc9d5\uacfc \uc0ac\uc6a9\ubc95\uc744 \uc219\uc9c0\ud558\uc5ec \ud544\uc694\uc5d0 \ub9de\ub294 \uc800\uc7a5\uc18c\ub97c \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n \uc774\ubc88 \ube14\ub85c\uadf8 \uae00\uc774 Apache Cordova\uc5d0\uc11c \ub370\uc774\ud130 \uc800\uc7a5\uc18c\ub97c \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub418\uc5c8\uc73c\uba74 \ud569\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uc608\uc81c\uc640 \uc0ac\uc6a9\ubc95\uc744 \ud1b5\ud574 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c \uc18d\ub3c4\ub97c \ub192\uc774\uace0, \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \ub370 \uae30\uc5ec\ud560 \uc218 \uc788\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\nlocalStorage<\/code> \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774 \uac1d\uccb4\ub294 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\uace0, \ubd88\ub7ec\uc624\uace0, \uc0ad\uc81c\ud558\ub294 \uba54\uc18c\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\ub370\uc774\ud130 \uc800\uc7a5<\/h4>\n
\n
\nlocalStorage.setItem('username', 'john_doe');\nlocalStorage.setItem('email', 'john@example.com');\n<\/code>\n <\/pre>\n\ub370\uc774\ud130 \ubd88\ub7ec\uc624\uae30<\/h4>\n
\n
\nconst username = localStorage.getItem('username');\nconst email = localStorage.getItem('email');\nconsole.log(username); \/\/ \"john_doe\"\nconsole.log(email); \/\/ \"john@example.com\"\n<\/code>\n <\/pre>\n\ub370\uc774\ud130 \uc0ad\uc81c<\/h4>\n
\n
\nlocalStorage.removeItem('username');\nlocalStorage.clear(); \/\/ \ubaa8\ub4e0 \ub370\uc774\ud130 \uc0ad\uc81c\n<\/code>\n <\/pre>\n1.2 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc758 \ud2b9\uc9d5<\/h3>\n
\n
1.3 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc758 \uc0ac\uc6a9 \uc608\uc81c<\/h3>\n
\n
\nfunction saveUserSettings() {\n const theme = document.querySelector('input[name=\"theme\"]:checked').value;\n const language = document.querySelector('input[name=\"language\"]:checked').value;\n localStorage.setItem('theme', theme);\n localStorage.setItem('language', language);\n}\n\nfunction loadUserSettings() {\n const theme = localStorage.getItem('theme') || 'light';\n const language = localStorage.getItem('language') || 'en';\n document.querySelector(`input[name=\"theme\"][value=\"${theme}\"]`).checked = true;\n document.querySelector(`input[name=\"language\"][value=\"${language}\"]`).checked = true;\n}\n\ndocument.addEventListener('DOMContentLoaded', loadUserSettings);\n<\/code>\n <\/pre>\n2. IndexedDB<\/h2>\n
2.1 IndexedDB\uc758 \ud2b9\uc9d5<\/h3>\n
\n
2.2 IndexedDB\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n
\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc5f4\uae30<\/h4>\n
\n
\nconst request = indexedDB.open('myDatabase', 1);\n\nrequest.onerror = function(event) {\n console.error('Database error:', event.target.error);\n};\n\nrequest.onsuccess = function(event) {\n const db = event.target.result;\n console.log('Database opened successfully');\n};\n\nrequest.onupgradeneeded = function(event) {\n const db = event.target.result;\n const objectStore = db.createObjectStore('users', { keyPath: 'id' });\n objectStore.createIndex('name', 'name', { unique: false });\n console.log('Object store created');\n};\n<\/code>\n <\/pre>\n\ub370\uc774\ud130 \uc800\uc7a5<\/h4>\n
\n
\nfunction addUser(id, name, email) {\n const transaction = db.transaction(['users'], 'readwrite');\n const objectStore = transaction.objectStore('users');\n const user = { id: id, name: name, email: email };\n const request = objectStore.add(user);\n\n request.onsuccess = function() {\n console.log('User added to the database');\n };\n\n request.onerror = function(event) {\n console.error('Error adding user:', event.target.error);\n };\n}\n<\/code>\n <\/pre>\n\ub370\uc774\ud130 \uc870\ud68c<\/h4>\n
\n
\nfunction getUser(id) {\n const transaction = db.transaction(['users']);\n const objectStore = transaction.objectStore('users');\n const request = objectStore.get(id);\n \n request.onsuccess = function(event) {\n const user = event.target.result;\n if (user) {\n console.log('User found:', user);\n } else {\n console.log('User not found');\n }\n };\n \n request.onerror = function(event) {\n console.error('Error getting user:', event.target.error);\n };\n}\n<\/code>\n <\/pre>\n2.3 IndexedDB\uc758 \uc0ac\uc6a9 \uc608\uc81c<\/h3>\n
\n
\nlet db;\n\nconst request = indexedDB.open('UserDB', 1);\n\nrequest.onupgradeneeded = function(event) {\n db = event.target.result;\n const objectStore = db.createObjectStore('users', { keyPath: 'id' });\n objectStore.createIndex('name', 'name', { unique: false });\n};\n\nrequest.onsuccess = function(event) {\n db = event.target.result;\n\n \/\/ \uc0ac\uc6a9\uc790 \ucd94\uac00\n addUser(1, 'John Doe', 'john@example.com');\n addUser(2, 'Jane Doe', 'jane@example.com');\n\n \/\/ \uc0ac\uc6a9\uc790 \uc870\ud68c\n getUser(1);\n};\n\n\/\/ \uc0ac\uc6a9\uc790 \ucd94\uac00 \ubc0f \uc870\ud68c \ud568\uc218\ub294 \uc704 \uc608\uc81c\ub97c \ucc38\uc870\ud558\uc5ec \uc791\uc131\n<\/code>\n <\/pre>\n\uacb0\ub860<\/h2>\n
\ucc38\uace0 \uc790\ub8cc<\/h2>\n