{"id":8953,"date":"2023-02-28T01:26:44","date_gmt":"2023-02-27T21:56:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/"},"modified":"2023-02-28T01:26:44","modified_gmt":"2023-02-27T21:56:44","slug":"indexeddb-on-steroids-using-dexiejs-1ej4","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/","title":{"rendered":"IndexedDB \u062f\u0631 \u0627\u0633\u062a\u0631\u0648\u0626\u06cc\u062f\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Dexie.js"},"content":{"rendered":"<div data-article-id=\"1379799\" id=\"article-body\">\n<blockquote>\n<p><em>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af \u0645\u0646 \u0628\u0627 \u0646\u06a9\u0627\u062a \u0628\u0631\u062c\u0633\u062a\u0647 \u062e\u0637 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0648 \u063a\u06cc\u0631\u0647 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/em><\/p>\n<\/blockquote>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#IndexedDB_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >IndexedDB \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#Dexiejs\" >Dexie.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Dexiejs\" >\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Dexie.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_Dexiejs\" >\u0627\u0641\u0632\u0648\u062f\u0646 Dexie.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%DA%AF%D8%B1%D9%81%D8%AA%D9%86_%D9%88%D8%B1%D9%88%D8%AF%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\" >\u06af\u0631\u0641\u062a\u0646 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_%D9%88_%D8%AC%D8%AF%D8%A7%D9%88%D9%84\" >\u0627\u06cc\u062c\u0627\u062f \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0648 \u062c\u062f\u0627\u0648\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%D8%AF%D8%B1%D8%AC_%D8%AF%D8%B1_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87\" >\u062f\u0631\u062c \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%DA%A9%D8%A7%D8%B1%D9%87%D8%A7%DB%8C_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B4%D8%AF%D9%87_%D8%AF%D8%B1_UI\" >\u0646\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062f\u0631 UI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%D8%B1%D8%B3%D8%A7%D9%86%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7_%D8%AF%D8%B1_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87\" >\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%D9%88%D8%B1%D8%B2%D8%B4\" >\u0648\u0631\u0632\u0634<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/indexeddb-on-steroids-using-dexiejs-1ej4\/#%DA%A9%D8%AF_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\" >\u06a9\u062f \u0646\u0647\u0627\u06cc\u06cc<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"IndexedDB_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  IndexedDB \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>IndexedDB \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 NoSQL \u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0627\u062c\u0627\u0632\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u062d\u062a\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u0622\u0641\u0644\u0627\u06cc\u0646 \u0646\u06cc\u0632 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f.<\/p>\n<p>\u0645\u0632\u06cc\u062a \u0627\u0635\u0644\u06cc indexedDB \u0646\u0633\u0628\u062a \u0628\u0647 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062d\u0644\u06cc \u0627\u06cc\u0646 \u0628\u0648\u062f \u06a9\u0647 \u062d\u062a\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0633\u062a\u06cc\u0645 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0648 \u062d\u0628\u0627\u0628\u200c\u0647\u0627 (\u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627 \u0648 \u063a\u06cc\u0631\u0647) \u0631\u0627 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u0634\u06cc\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dexiejs\"><\/span>\n<p>  Dexie.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06a9\u0627\u0631 \u0628\u0627 API \u0633\u0637\u062d \u067e\u0627\u06cc\u06cc\u0646 indexedDB \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u06a9\u0627\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0627\u0633\u062a.  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f MDN \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0627\u0632 indexedDB API \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0631\u0647\u0627\u060c Dexie.js \u06cc\u06a9 \u0641\u0631\u0622\u06cc\u0646\u062f \u0633\u0627\u062f\u0647 \u0648 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u0627\u06cc\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u062f\u0627\u062f\u0647\u060c \u0630\u062e\u06cc\u0631\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0648 \u063a\u06cc\u0631\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc indexedDB \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Dexiejs\"><\/span>\n<p>  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Dexie.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 dexie.js\u060c \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0648 \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD\u060c \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0633\u0627\u062e\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>index.html<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\n<span class=\"nt\">&lt;html<\/span> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\">&lt;head&gt;<\/span>\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">http-equiv=<\/span><span class=\"s\">\"X-UA-Compatible\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"IE=edge\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;title&gt;<\/span>Document<span class=\"nt\">&lt;\/title&gt;<\/span>\n    <span class=\"nt\">&lt;link<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/cdn.jsdelivr.net\/npm\/bulma@0.9.4\/css\/bulma.min.css\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\">&lt;\/head&gt;<\/span>\n<span class=\"nt\">&lt;body&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"content\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;ul<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"todoList\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;\/ul&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n    <span class=\"nt\">&lt;div&gt;<\/span>\n        <span class=\"nt\">&lt;form<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"addTodoForm\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"column form\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"field\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\">&lt;label<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"label\"<\/span> <span class=\"na\">for=<\/span><span class=\"s\">\"todo\"<\/span><span class=\"nt\">&gt;<\/span>Todo<span class=\"nt\">&lt;\/label&gt;<\/span>\n                <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"control\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\">&lt;input<\/span> <span class=\"na\">required<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"input\"<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"todo\"<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"todo\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"text\"<\/span> <span class=\"na\">placeholder=<\/span><span class=\"s\">\"Todo\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\">&lt;\/div&gt;<\/span>\n            <span class=\"nt\">&lt;\/div&gt;<\/span>\n            <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"field is-grouped\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"control\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\">&lt;button<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"button is-link\"<\/span><span class=\"nt\">&gt;<\/span>Create todo<span class=\"nt\">&lt;\/button&gt;<\/span>\n                <span class=\"nt\">&lt;\/div&gt;<\/span>\n            <span class=\"nt\">&lt;\/div&gt;<\/span>\n        <span class=\"nt\">&lt;\/form&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n<span class=\"nt\">&lt;\/body&gt;<\/span>\n<span class=\"nt\">&lt;\/html&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0641\u0627\u06cc\u0644 html \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u0631 HTTP \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u062e\u0648\u062f \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.  \u0645\u0646 \u0627\u0632 \u067e\u0633\u0648\u0646\u062f Live Server VS Code \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645.  \u0634\u0645\u0627 \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f.<\/p>\n<p><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u060c \u0627\u0632 Bulma CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  Todos \u0628\u0627 \u062a\u0627\u06cc\u067e \u06a9\u0631\u062f\u0646 \u062f\u0631 \u06a9\u0627\u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0647\u06cc\u0686 \u0686\u06cc\u0632 \u06a9\u0627\u0631 \u0646\u0645\u06cc \u06a9\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0647\u0646\u0648\u0632 \u0628\u0627\u06cc\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_Dexiejs\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 Dexie.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>main.js,<\/code> \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0646\u0637\u0642 \u062a\u062c\u0627\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc \u0646\u0648\u06cc\u0633\u06cc\u0645.  \u0645\u0627 \u0627\u0632 \u06cc\u06a9 \u0628\u0627\u0646\u062f\u0644\u0631 \u0645\u0627\u0698\u0648\u0644 \u0645\u0627\u0646\u0646\u062f webpack \u06cc\u0627 parcel.js \u0628\u0631\u0627\u06cc \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u06a9\u0627\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u062f\u0631 \u0639\u0648\u0636\u060c \u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>Dexie<\/code> \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 CDN<\/p>\n<p>\u062d\u0627\u0644\u0627 \u0647\u0631 \u062f\u0648 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 html \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\n<span class=\"nt\">&lt;html<\/span> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n\n<span class=\"nt\">&lt;head&gt;<\/span>\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">http-equiv=<\/span><span class=\"s\">\"X-UA-Compatible\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"IE=edge\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;title&gt;<\/span>Document<span class=\"nt\">&lt;\/title&gt;<\/span>\n    <span class=\"nt\">&lt;link<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/cdn.jsdelivr.net\/npm\/bulma@0.9.4\/css\/bulma.min.css\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\">&lt;\/head&gt;<\/span>\n\n<span class=\"nt\">&lt;body&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"content\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;ul<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"todoList\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;\/ul&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n\n    <span class=\"nt\">&lt;div&gt;<\/span>\n        <span class=\"nt\">&lt;form<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"addTodoForm\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"column form\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"field\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\">&lt;label<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"label\"<\/span> <span class=\"na\">for=<\/span><span class=\"s\">\"todo\"<\/span><span class=\"nt\">&gt;<\/span>Todo<span class=\"nt\">&lt;\/label&gt;<\/span>\n                <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"control\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\">&lt;input<\/span> <span class=\"na\">required<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"input\"<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"todo\"<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"todo\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"text\"<\/span> <span class=\"na\">placeholder=<\/span><span class=\"s\">\"Todo\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\">&lt;\/div&gt;<\/span>\n            <span class=\"nt\">&lt;\/div&gt;<\/span>\n            <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"field is-grouped\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"control\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\">&lt;button<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"button is-link\"<\/span><span class=\"nt\">&gt;<\/span>Create todo<span class=\"nt\">&lt;\/button&gt;<\/span>\n                <span class=\"nt\">&lt;\/div&gt;<\/span>\n            <span class=\"nt\">&lt;\/div&gt;<\/span>\n        <span class=\"nt\">&lt;\/form&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/unpkg.com\/dexie\/dist\/dexie.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\".\/main.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n<span class=\"nt\">&lt;\/body&gt;<\/span>\n\n<span class=\"nt\">&lt;\/html&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%DA%AF%D8%B1%D9%81%D8%AA%D9%86_%D9%88%D8%B1%D9%88%D8%AF%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\"><\/span>\n<p>  \u06af\u0631\u0641\u062a\u0646 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06a9\u0647 \u062f\u0631 <code>main.js,<\/code> \u0645\u0627 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u062a\u0627 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0636\u0628\u0637 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">formElement<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">addTodoForm<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoInput<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todo<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoList<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todoList<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">formElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">submit<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">preventDefault<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">todoName<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">;<\/span>    \n\n  <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Todo to be created<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">todoName<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>   <span class=\"c1\">\/\/ reset input<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\n<code>formElement<\/code>  &#8211; \u0641\u0631\u0645\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f TODO \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645<\/li>\n<li>\n<code>todoInput<\/code>  &#8211; \u0648\u0631\u0648\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f todo \u0645\u06cc \u0634\u0648\u062f<\/li>\n<li>\n<code>todoList<\/code>  &#8211; \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0647\u0645\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0641\u0647\u0631\u0633\u062a \u06a9\u0646\u06cc\u0645<\/li>\n<\/ul>\n<p>\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u0628\u0627 \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645\u060c \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0648\u0631\u0648\u062f \u0628\u0647 \u06a9\u0646\u0633\u0648\u0644 \u0647\u0633\u062a\u06cc\u0645.  \u0627\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u06cc\u062f\u0647\u200c\u0622\u0644\u060c \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 to-do \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 UI \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u0645.  \u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0627\u0632 Dexie.js \u0628\u0631\u0627\u06cc \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_%D9%88_%D8%AC%D8%AF%D8%A7%D9%88%D9%84\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0648 \u062c\u062f\u0627\u0648\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 dexie.js \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 indexedDB \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">db<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Dexie<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">databaseName<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062c\u062f\u0627\u0648\u0644 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>db<\/code> \u0646\u0645\u0648\u0646\u0647\u060c \u0645\u062b\u0627\u0644 <code>stores<\/code> \u0631\u0648\u0634 \u0631\u0627 \u0628\u0627 \u0627\u0631\u0633\u0627\u0644 \u06cc\u06a9 \u0634\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0646\u0627\u0645 \u062c\u062f\u0648\u0644 \u06a9\u0644\u06cc\u062f \u0627\u0633\u062a \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0627 \u06a9\u0627\u0645\u0627 \u0627\u0632 \u0647\u0645 \u062c\u062f\u0627 \u0634\u062f\u0647 \u0627\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">version<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nx\">stores<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">tableOne<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`++id, col3, col3`<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">tableTwo<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`++id, col3, col3`<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u0646\u062f\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0634\u0645\u0627\u0631\u0647 \u0646\u0633\u062e\u0647 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0646\u0633\u062e\u0647 indexedDB \u0627\u0633\u062a.<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0627\u0639\u0644\u0627\u0645 \u0633\u062a\u0648\u0646 \u0647\u0627<\/p>\n<ul>\n<li>\u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f \u06a9\u0644\u06cc\u062f \u0627\u0635\u0644\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/li>\n<li>\n<code>++<\/code>  \u067e\u06cc\u0634\u0648\u0646\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\n<code>&amp;<\/code>    \u067e\u06cc\u0634\u0648\u0646\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0633\u062a\u0648\u0646 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<\/ul>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>TodoDatabase<\/code><\/p>\n<p>\u0645\u0627 todos \u0631\u0627 \u062f\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>todo<\/code> \u062c\u062f\u0648\u0644 \u0628\u0627 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u0632\u06cc\u0631<\/p>\n<ul>\n<li>\n<code>id<\/code>  &#8211; \u06a9\u0644\u06cc\u062f \u0627\u0635\u0644\u06cc<\/li>\n<li>\n<code>name<\/code>  &#8211; \u0646\u0627\u0645 \u06a9\u0627\u0631<\/li>\n<li>\n<code>completed<\/code>  &#8211; \u0648\u0636\u0639\u06cc\u062a Todo\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">db<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Dexie<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">TodoDatabase<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">version<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nx\">stores<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">todo<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`++id, name, completed`<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">formElement<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">addTodoForm<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoInput<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todo<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoList<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todoList<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">formElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">submit<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">preventDefault<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">todoName<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Todo to be created<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">todoName<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"c1\">\/\/ reset input<\/span>\n  <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1%D8%AC_%D8%AF%D8%B1_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  \u062f\u0631\u062c \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f todos \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>todo<\/code> \u062c\u062f\u0648\u0644.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 () Table.add \u0627\u0634\u06cc\u0627\u0621 \u0631\u0627 \u062f\u0631 \u062c\u062f\u0648\u0644 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">db<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Dexie<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">TodoDatabase<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">version<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nx\">stores<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">todo<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`++id, name, completed`<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">formElement<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">addTodoForm<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoInput<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todo<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoList<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todoList<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n\n<span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">createTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">todoName<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">todoName<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">formElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">submit<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">preventDefault<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">todoName<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nx\">createTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">todoName<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ reset input<\/span>\n  <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645\u060c \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>createTodo<\/code> \u062a\u0627\u0628\u0639.<\/p>\n<p><code>createTodo<\/code>  \u062a\u0627\u0628\u0639 \u06a9\u0627\u0631 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0631\u062c \u0645\u06cc \u06a9\u0646\u062f <code>Table.add()<\/code> \u0631\u0648\u0634.  \u0645\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u067e\u0627\u0633 \u06a9\u0631\u062f\u0646 \u0646\u062f\u0627\u0631\u06cc\u0645 <code>id<\/code> \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u06cc\u0627\u0628\u062f.<\/p>\n<p>\u062d\u0627\u0644 \u0627\u06af\u0631 todos \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c todo\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u0622\u0646 \u062f\u0631\u062c \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f <code>todo<\/code> \u062c\u062f\u0648\u0644.  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0627\u0628\u0632\u0627\u0631 \u062a\u0648\u0633\u0639\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/IndexedDB-\u062f\u0631-\u0627\u0633\u062a\u0631\u0648\u0626\u06cc\u062f\u0647\u0627-\u0628\u0627-\u0627\u0633\u062a\u0641\u0627\u062f\u0647-\u0627\u0632-Dexiejs.png&#038;w=1080&#038;q=75.png\" alt=\"IndexedDB \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 dexie js \u062f\u0631 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\" loading=\"lazy\" width=\"880\" height=\"369\" title=\"\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%DA%A9%D8%A7%D8%B1%D9%87%D8%A7%DB%8C_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B4%D8%AF%D9%87_%D8%AF%D8%B1_UI\"><\/span>\n<p>  \u0646\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062f\u0631 UI<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062d\u062a\u06cc \u0627\u06af\u0631 \u06a9\u0627\u0631\u0647\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u06cc\u062c\u0627\u062f \u0647\u0633\u062a\u0646\u062f\u060c \u062f\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u06cc\u0633\u062a\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0647\u0646\u06af\u0627\u0645 \u0627\u0641\u0632\u0648\u062f\u0646\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06cc\u0627 \u062d\u0630\u0641 \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646\u200c\u0647\u0627 \u062f\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0627\u0632 liveQuery \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0627\u06af\u0631 \u0628\u06af\u0630\u0631\u06cc\u062f <code>liveQuery<\/code>\u060c \u06cc\u06a9 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0645\u0627\u0646\u0646\u062f <code>Table.where<\/code> \u06cc\u0627 <code>Table.toArray<\/code> .  \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u062c\u0627\u062f\u060c \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06cc\u0627 \u062d\u0630\u0641 \u0628\u0631 \u0646\u062a\u06cc\u062c\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0634\u0645\u0627 \u062a\u0623\u062b\u06cc\u0631 \u0628\u06af\u0630\u0627\u0631\u062f\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u0648 \u0646\u062a\u06cc\u062c\u0647 (\u0645\u0642\u062f\u0627\u0631 \u0628\u0631\u06af\u0634\u062a\u06cc) \u062a\u0648\u0633\u0637 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0646\u062a\u0634\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 to-do \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0647 \u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0631 \u0622\u0646 \u0645\u0634\u062a\u0631\u06a9 \u0634\u0648\u06cc\u0645 \u0648 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c UI \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">todoObservable<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Dexie<\/span><span class=\"p\">.<\/span><span class=\"nx\">liveQuery<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">toArray<\/span><span class=\"p\">());<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0634\u062a\u0631\u0627\u06a9 \u062f\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">db<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Dexie<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">TodoDatabase<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">version<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nx\">stores<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">todo<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`++id, name, completed`<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">formElement<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">addTodoForm<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoInput<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todo<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoList<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todoList<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n\n<span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">createTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">todoName<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">todoName<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoObservable<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Dexie<\/span><span class=\"p\">.<\/span><span class=\"nx\">liveQuery<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">toArray<\/span><span class=\"p\">());<\/span>\n\n<span class=\"nx\">todoObservable<\/span><span class=\"p\">.<\/span><span class=\"nx\">subscribe<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">next<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ first remove existing items<\/span>\n    <span class=\"nx\">todoList<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>\n\n    <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">todo<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">newTodo<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">li<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">newTodo<\/span><span class=\"p\">.<\/span><span class=\"nx\">dataset<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">newTodo<\/span><span class=\"p\">.<\/span><span class=\"nx\">dataset<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">newTodo<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerText<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">;<\/span>\n\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">newTodo<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">todoList<\/span><span class=\"p\">.<\/span><span class=\"nx\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">newTodo<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">),<\/span>\n<span class=\"p\">});<\/span>\n\n\n<span class=\"nx\">formElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">submit<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">preventDefault<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">todoName<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nx\">createTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">todoName<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ reset input<\/span>\n  <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0627\u0634\u062a\u0631\u0627\u06a9 \u062f\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u067e\u0630\u06cc\u0631\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u067e\u0627\u0633 \u06a9\u0646\u06cc\u0645 <code>next<\/code> \u0648 <code>error<\/code> \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633<\/p>\n<ul>\n<li>\n<code>next<\/code>  &#8211; \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u062a\u0645\u0627\u0633 \u0628\u0631\u06af\u0634\u062a\u06cc \u0627\u0632 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f <code>liveQuery<\/code> \u0646\u062a\u06cc\u062c\u0647 \u0628\u0647 \u0645\u0646\u062a\u0642\u0644 \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>next<\/code>\n<\/li>\n<li>\n<code>error<\/code>  &#8211; \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627\u0647\u0627 \u0628\u0631\u0627\u06cc \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0648 \u063a\u06cc\u0631\u0647<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627\u060c \u0645\u0627 \u0631\u0648\u06cc \u0647\u0645\u0647 \u06a9\u0627\u0631\u0647\u0627 \u062d\u0644\u0642\u0647 \u0645\u06cc \u0632\u0646\u06cc\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 UI \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>Array.forEach<\/code>.  \u0627\u06a9\u0646\u0648\u0646 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0627\u0631 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 UI \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%D8%B1%D8%B3%D8%A7%D9%86%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7_%D8%AF%D8%B1_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0639\u0644\u0627\u0645\u062a \u0632\u062f\u0646 \u06a9\u0627\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0627\u0645\u0644\u060c \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0645\u0648\u0631\u062f \u06a9\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u067e\u0633 \u0648\u0636\u0639\u06cc\u062a \u062a\u06a9\u0645\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06cc\u0627\u0628\u062f. <code>true<\/code> \u0648 \u0628\u0627\u0644\u0639\u06a9\u0633.  \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 <code>completed<\/code> \u0633\u062a\u0648\u0646 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Table.update(). <code>Table.update()<\/code> \u0645\u0642\u062f\u0627\u0631 \u06a9\u0644\u06cc\u062f \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0627\u0648\u0644 \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u0634\u0648\u0646\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u062f\u0648\u0645 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">update<\/span><span class=\"p\">(<\/span><span class=\"nx\">primaryKeyValue<\/span><span class=\"p\">,<\/span> <span class=\"nx\">dataToBeUpdated<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>toggleTodoCompleteStatus<\/code> \u06a9\u0647 \u0648\u0636\u0639\u06cc\u062a \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">db<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Dexie<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">TodoDatabase<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">version<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nx\">stores<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">todo<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`++id, name, completed`<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">formElement<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">addTodoForm<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoInput<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todo<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoList<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">todoList<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n\n<span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">createTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">todoName<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">todoName<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">todoObservable<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Dexie<\/span><span class=\"p\">.<\/span><span class=\"nx\">liveQuery<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">toArray<\/span><span class=\"p\">());<\/span>\n\n\n<span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">toggleTodoCompleteStatus<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">completed<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">dataset<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">isUpdated<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">update<\/span><span class=\"p\">(<\/span><span class=\"nb\">parseInt<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">),<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nx\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">completed<\/span><span class=\"p\">),<\/span> <span class=\"c1\">\/\/ to convert 'false` -&gt; false etc<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isUpdated<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error updating<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">todoObservable<\/span><span class=\"p\">.<\/span><span class=\"nx\">subscribe<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">next<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ first remove existing items<\/span>\n    <span class=\"nx\">todoList<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>\n\n    <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">todo<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">newTodo<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">li<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">newTodo<\/span><span class=\"p\">.<\/span><span class=\"nx\">dataset<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">newTodo<\/span><span class=\"p\">.<\/span><span class=\"nx\">dataset<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">newTodo<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerText<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">newTodo<\/span><span class=\"p\">.<\/span><span class=\"nx\">onclick<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">toggleTodoCompleteStatus<\/span><span class=\"p\">;<\/span>\n\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">newTodo<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">todoList<\/span><span class=\"p\">.<\/span><span class=\"nx\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">newTodo<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">),<\/span>\n<span class=\"p\">});<\/span>\n\n\n<span class=\"nx\">formElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">submit<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">preventDefault<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">todoName<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nx\">createTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">todoName<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ reset input<\/span>\n  <span class=\"nx\">todoInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0647 <code>onclick<\/code> \u0631\u0648\u0634 \u0645\u0633\u062a\u0642\u06cc\u0645  \u0631\u0627 <code>toggleTodoCompleteStatus<\/code>  \u0639\u0646\u0635\u0631 HTML \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0648 \u0648\u0636\u0639\u06cc\u062a \u062a\u06a9\u0645\u06cc\u0644 \u0634\u062f\u0647 \u0631\u0627 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0639\u0646\u0635\u0631 HTML \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0645\u0634\u062a\u0631\u06a9 \u0634\u062f\u0647 \u0627\u06cc\u0645\u060c \u0647\u0645\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u062f\u0631 UI \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u0634\u0648\u0646\u062f <code>todoObservable<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%88%D8%B1%D8%B2%D8%B4\"><\/span>\n<p>  \u0648\u0631\u0632\u0634<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0627 \u0628\u0647 \u062d\u0627\u0644\u060c \u0645\u0627 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645\u060c \u06cc\u06a9 \u062c\u062f\u0648\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0645\u0631\u06cc\u0646 \u06a9\u0648\u0686\u06a9\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u062d\u0630\u0641 todo \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u06cc\u0627\u0641\u062a\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u0646\u0627\u0633\u0628 \u0627\u0632 dexiejs docs\u060c \u0645\u0648\u0631\u062f todo \u0631\u0627 \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AF_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\"><\/span>\n<p>  \u06a9\u062f \u0646\u0647\u0627\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\n  <iframe frameborder=\"0\" height=\"550px\" src=\"https:\/\/repl.it\/@bgopikrishna\/DexieJS-Tutorial?lite=true\" loading=\"lazy\"><\/iframe>\n<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af \u0645\u0646 \u0628\u0627 \u0646\u06a9\u0627\u062a \u0628\u0631\u062c\u0633\u062a\u0647 \u062e\u0637 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0648 \u063a\u06cc\u0631\u0647 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f. IndexedDB \u0686\u06cc\u0633\u062a\u061f IndexedDB \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 NoSQL \u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0627\u062c\u0627\u0632\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a &hellip;<\/p>\n","protected":false},"author":2,"featured_media":8954,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-8953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/8953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=8953"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/8953\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/8954"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=8953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=8953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=8953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}