db.json

{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"source/img/favicon.ico","path":"img/favicon.ico","modified":1,"renderable":0},{"_id":"source/img/王阳/img1.png","path":"img/王阳/img1.png","modified":1,"renderable":0},{"_id":"source/img/王阳/img3.png","path":"img/王阳/img3.png","modified":1,"renderable":0},{"_id":"source/img/王阳/img4.png","path":"img/王阳/img4.png","modified":1,"renderable":0},{"_id":"source/img/王阳/img2.png","path":"img/王阳/img2.png","modified":1,"renderable":0},{"_id":"themes/icarus/source/css/style.styl","path":"css/style.styl","modified":1,"renderable":1},{"_id":"themes/icarus/source/js/insight.js","path":"js/insight.js","modified":1,"renderable":1},{"_id":"themes/icarus/source/js/main.js","path":"js/main.js","modified":1,"renderable":1},{"_id":"themes/icarus/source/css/images/avatar.png","path":"css/images/avatar.png","modified":1,"renderable":1},{"_id":"themes/icarus/source/css/images/logo.png","path":"css/images/logo.png","modified":1,"renderable":1},{"_id":"themes/icarus/source/css/images/thumb-default-small.png","path":"css/images/thumb-default-small.png","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_loading.gif","path":"vendor/fancybox/fancybox_loading.gif","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/blank.gif","path":"vendor/fancybox/blank.gif","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_overlay.png","path":"vendor/fancybox/fancybox_overlay.png","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_sprite.png","path":"vendor/fancybox/fancybox_sprite.png","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_sprite@2x.png","path":"vendor/fancybox/fancybox_sprite@2x.png","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_loading@2x.gif","path":"vendor/fancybox/fancybox_loading@2x.gif","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/jquery.fancybox.css","path":"vendor/fancybox/jquery.fancybox.css","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/jquery.fancybox.js","path":"vendor/fancybox/jquery.fancybox.js","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/jquery.fancybox.pack.js","path":"vendor/fancybox/jquery.fancybox.pack.js","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/styles.css","path":"vendor/open-sans/styles.css","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/source-code-pro/styles.css","path":"vendor/source-code-pro/styles.css","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/font-awesome/css/font-awesome.min.css","path":"vendor/font-awesome/css/font-awesome.min.css","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.eot","path":"vendor/font-awesome/fonts/fontawesome-webfont.eot","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.woff2","path":"vendor/font-awesome/fonts/fontawesome-webfont.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2","path":"vendor/open-sans/fonts/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2","path":"vendor/open-sans/fonts/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2","path":"vendor/open-sans/fonts/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2","path":"vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2","path":"vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2","path":"vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2","path":"vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2","path":"vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2","path":"vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2","path":"vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2","path":"vendor/open-sans/fonts/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2","path":"vendor/open-sans/fonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2","path":"vendor/open-sans/fonts/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBiYE0-AqJ3nfInTTiDXDjU4.woff2","path":"vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBiYE0-AqJ3nfInTTiDXDjU4.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBjTOQ_MqJVwkKsUn0wKzc2I.woff2","path":"vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBjTOQ_MqJVwkKsUn0wKzc2I.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBkbcKLIaa1LC45dFaAfauRA.woff2","path":"vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBkbcKLIaa1LC45dFaAfauRA.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBjUj_cnvWIuuBMVgbX098Mw.woff2","path":"vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBjUj_cnvWIuuBMVgbX098Mw.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBmo_sUJ8uO4YLWRInS22T3Y.woff2","path":"vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBmo_sUJ8uO4YLWRInS22T3Y.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2","path":"vendor/open-sans/fonts/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBr6up8jxqWt8HVA3mDhkV_0.woff2","path":"vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBr6up8jxqWt8HVA3mDhkV_0.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2","path":"vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/source-code-pro/fonts/mrl8jkM18OlOQN8JLgasDy2Q8seG17bfDXYR_jUsrzg.woff2","path":"vendor/source-code-pro/fonts/mrl8jkM18OlOQN8JLgasDy2Q8seG17bfDXYR_jUsrzg.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/source-code-pro/fonts/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2","path":"vendor/source-code-pro/fonts/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/helpers/fancybox_buttons.png","path":"vendor/fancybox/helpers/fancybox_buttons.png","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-buttons.css","path":"vendor/fancybox/helpers/jquery.fancybox-buttons.css","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-buttons.js","path":"vendor/fancybox/helpers/jquery.fancybox-buttons.js","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-thumbs.css","path":"vendor/fancybox/helpers/jquery.fancybox-thumbs.css","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-thumbs.js","path":"vendor/fancybox/helpers/jquery.fancybox-thumbs.js","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-media.js","path":"vendor/fancybox/helpers/jquery.fancybox-media.js","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/FontAwesome.otf","path":"vendor/font-awesome/fonts/FontAwesome.otf","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.ttf","path":"vendor/font-awesome/fonts/fontawesome-webfont.ttf","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.woff","path":"vendor/font-awesome/fonts/fontawesome-webfont.woff","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/jquery/2.1.3/jquery.min.js","path":"vendor/jquery/2.1.3/jquery.min.js","modified":1,"renderable":1},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.svg","path":"vendor/font-awesome/fonts/fontawesome-webfont.svg","modified":1,"renderable":1}],"Cache":[{"_id":"themes/icarus/.gitignore","hash":"ece1c3037855e866d5816467cdfb2cef4e36e0a7","modified":1466582223678},{"_id":"themes/icarus/LICENSE","hash":"73ed09aa00f7bda6319fc7d5b722fb40e0c2017e","modified":1466582223679},{"_id":"themes/icarus/README.md","hash":"9373d2a7d6eb942be76e5a0a92cc09b7028fb228","modified":1466582223679},{"_id":"themes/icarus/_config.yml","hash":"2b018381e525947856d7be095bd347cdf2d575e9","modified":1467352023279},{"_id":"themes/icarus/package.json","hash":"77fb10efa37f0ce36c01cecb44f91629e0fcf7f6","modified":1466582223696},{"_id":"source/_posts/Hexo书写博客.md","hash":"48c4642026c0bfd04cd7d9afd4b9469300a3d60b","modified":1466731443078},{"_id":"source/_posts/Local-Storage.md","hash":"3bd6adc5d3f29cd399ee025733c2ca9c22c454e7","modified":1467362715447},{"_id":"source/_posts/webpack从入门到精通（一）.md","hash":"8f6e667be57cb94dd6f09fe989556c76091825f8","modified":1466648817782},{"_id":"source/img/favicon.ico","hash":"a5e48dbf59d3686a68137760ade2593c793a7b6b","modified":1466731528569},{"_id":"themes/icarus/.github/ISSUE_TEMPLATE.md","hash":"d671399e0c3bf2be4b131a72dc69b3698e8cafca","modified":1466582223678},{"_id":"themes/icarus/languages/en.yml","hash":"2b888a89957e07f440452a12ef338af979abb4c6","modified":1466582223681},{"_id":"themes/icarus/languages/id.yml","hash":"2dc3671a92378f4bd499b0dcfb90170bb44c786b","modified":1466582223682},{"_id":"themes/icarus/languages/ja.yml","hash":"e13df67ba3666c0d95d60c081e41fb86f6f48663","modified":1466582223682},{"_id":"themes/icarus/languages/es.yml","hash":"f48b21e020b48a38747a5cd0a2c853d717ad8a7f","modified":1466582223681},{"_id":"themes/icarus/languages/ko.yml","hash":"5e6e5b5d20c940cf0be26957f3a3f6a141f338e0","modified":1466582223682},{"_id":"themes/icarus/languages/pt-BR.yml","hash":"3cf767f94766ac3a93d6efb9ef954e20d16b2b44","modified":1466582223683},{"_id":"themes/icarus/languages/ru.yml","hash":"7423608a9608766ab5998d6b8d3e8d76b792e30e","modified":1466582223683},{"_id":"themes/icarus/languages/zh-CN.yml","hash":"fdce6e6716768cfac9355c4e88a05260efeeae1c","modified":1466582223683},{"_id":"themes/icarus/languages/zh-TW.yml","hash":"646a7ef3e85481b013ffb2f4d9f9a8900f092d73","modified":1466582223683},{"_id":"themes/icarus/scripts/fancybox.js","hash":"c5ccce47ecfa93925c54516f6af85d690f8f6476","modified":1466582223696},{"_id":"themes/icarus/scripts/meta.js","hash":"2e5ac0cb9c90c072ca4b33e88f1892e954935ab7","modified":1466582223697},{"_id":"themes/icarus/scripts/thumbnail.js","hash":"c2b6e61d2b67f85855b52aec0a720cfc01aa50a2","modified":1466582223697},{"_id":"themes/icarus/languages/fr.yml","hash":"7b386bf21226433cb7da7989aba07ce33da5b359","modified":1466582223682},{"_id":"themes/icarus/layout/category.ejs","hash":"1d407f9176db84e83062c52ad4755aaea9e74401","modified":1466582223684},{"_id":"themes/icarus/layout/categories.ejs","hash":"7be3918bcfb9f04b5213aeda4ad19c952128bee3","modified":1466582223684},{"_id":"themes/icarus/layout/archive.ejs","hash":"4f4ca27a35df41cf056d5f25f77e683e8e777885","modified":1466582223684},{"_id":"themes/icarus/layout/index.ejs","hash":"c329f4598a0af4d8678ba789fdc84fcdf10122de","modified":1466582223690},{"_id":"themes/icarus/layout/layout.ejs","hash":"2bc1e3071a5ec25096584d01726a3b7c4d53ffaf","modified":1466582223690},{"_id":"themes/icarus/layout/page.ejs","hash":"50170783bac99946ae8af483920568de9b2d9801","modified":1466582223690},{"_id":"themes/icarus/layout/post.ejs","hash":"50170783bac99946ae8af483920568de9b2d9801","modified":1466582223691},{"_id":"themes/icarus/layout/tag.ejs","hash":"f6c220d4e5c231028bc71ddc11aec97d7b5a9943","modified":1466582223694},{"_id":"themes/icarus/layout/tags.ejs","hash":"2a5b11bdf0dbf7300e11eae34bba00490ed77a0f","modified":1466582223694},{"_id":"source/img/王阳/img1.png","hash":"20cf971c375844446f974c009f8c556215380790","modified":1466646860299},{"_id":"source/img/王阳/img3.png","hash":"ecea72c80dd35334e8eacb5889421390608b8d12","modified":1466648902504},{"_id":"source/img/王阳/img4.png","hash":"8236985dbd2e826246fe2df554960b0215ca48ca","modified":1466648947623},{"_id":"source/img/王阳/img2.png","hash":"f39fcf40b820b4d7095afd45e37384e734959fba","modified":1466647349592},{"_id":"themes/icarus/source/css/_extend.styl","hash":"74dc73324adde45f2635be99e7b44fd8939342e0","modified":1466582223697},{"_id":"themes/icarus/source/css/_variables.styl","hash":"e8cdbd3e0658bb71a5395b6989758adc127bbb9a","modified":1466582223716},{"_id":"themes/icarus/source/css/style.styl","hash":"75d65387c80735545590fa818c20f97c1624ee89","modified":1466582223717},{"_id":"themes/icarus/source/js/insight.js","hash":"154c023c13d913984e9f70e22affea1ee8abe444","modified":1466582223717},{"_id":"themes/icarus/source/js/main.js","hash":"a4340da7177c2f5c0e9d598bcb68ad836248f85d","modified":1466582223718},{"_id":"themes/icarus/_source/categories/index.md","hash":"62fe9cd3a09f7971c8bfb84f18ed7863f84cb30a","modified":1466582223680},{"_id":"themes/icarus/_source/about/index.md","hash":"0a1f66704011f283f4f90a10d41588f8986f8616","modified":1466582223680},{"_id":"themes/icarus/_source/tags/index.md","hash":"f913370f50299b9b8b4cfd73fbdd5c07f4950549","modified":1466582223681},{"_id":"themes/icarus/layout/common/article.ejs","hash":"7ea074d4153d2ee0b802891a77a8159198d35470","modified":1466582223686},{"_id":"themes/icarus/layout/common/footer.ejs","hash":"6f3dfcbd7abf46e562d9f91e9f34997f90d080be","modified":1466582223686},{"_id":"themes/icarus/layout/common/head.ejs","hash":"8a38f6030442b66df4516b76bfb739e732c0c825","modified":1466582223686},{"_id":"themes/icarus/layout/common/header.ejs","hash":"c75d5c3e956f70b0b82552f1e3f5749f0229ddd7","modified":1466582223686},{"_id":"themes/icarus/layout/common/scripts.ejs","hash":"6c39352254c93f1fbedb4e81d2fdc94f34f54c2e","modified":1466582223689},{"_id":"themes/icarus/layout/common/profile.ejs","hash":"d4dfa98d6481f9cd8f78b7a749276a76241b35d1","modified":1466582223689},{"_id":"themes/icarus/layout/common/thumbnail.ejs","hash":"b80d8733a620be64a6f7d73f0b012a986755fd91","modified":1466582223690},{"_id":"themes/icarus/layout/common/timeline.ejs","hash":"ace5dd8bed61ceec59be28d10fa716706b236e14","modified":1466582223690},{"_id":"themes/icarus/layout/common/sidebar.ejs","hash":"c2a2fc5dd40fa6349127c0eb3144e55dfa7555cf","modified":1466582223689},{"_id":"themes/icarus/layout/comment/disqus.ejs","hash":"84988da295ab8c509e24299c2c857d707cf78f77","modified":1466582223685},{"_id":"themes/icarus/layout/comment/counter.ejs","hash":"13f884f07e1ed39fde1a84cd51d45b4d90078b83","modified":1466582223684},{"_id":"themes/icarus/layout/comment/index.ejs","hash":"c36e6b376647ae715d417cb928c2082ef56766a9","modified":1466582223685},{"_id":"themes/icarus/layout/comment/scripts.ejs","hash":"8767c30714baf8011bb191b8a1c652ea114a53f2","modified":1466582223685},{"_id":"themes/icarus/layout/comment/duoshuo.ejs","hash":"adc024b7205e934e64c98a5b912c41117a4425bd","modified":1466582223685},{"_id":"themes/icarus/layout/comment/youyan.ejs","hash":"b4c49b97b757d01ba0c4e16f9862a2ec05f37b1f","modified":1466582223685},{"_id":"themes/icarus/layout/plugin/baidu-analytics.ejs","hash":"3218b9f6345aaa537f742ab4781bd27a3f40c378","modified":1466582223691},{"_id":"themes/icarus/layout/plugin/google-analytics.ejs","hash":"760a8f9ee9b81f6eb27a5f2c8c5159b220a88a74","modified":1466582223691},{"_id":"themes/icarus/layout/share/addtoany.ejs","hash":"b79f714da69c121729a136df0c94c09a85966d44","modified":1466582223693},{"_id":"themes/icarus/layout/share/index.ejs","hash":"52c094140d19e7e2fce57fe43968b2bd86aa4ef0","modified":1466582223694},{"_id":"themes/icarus/layout/share/jiathis.ejs","hash":"442abbc0fe5cab4171179257d172150f2a789638","modified":1466582223694},{"_id":"themes/icarus/layout/plugin/scripts.ejs","hash":"0dd990a8fcc76ccff8c570f603cdf80fef9e7916","modified":1466582223691},{"_id":"themes/icarus/layout/share/default.ejs","hash":"8532f15f400dbc7c1e89ab26972fc4e404001849","modified":1466582223693},{"_id":"themes/icarus/layout/widget/archive.ejs","hash":"d6412cd574744f994f16e3a70ce29a71b449133a","modified":1466582223695},{"_id":"themes/icarus/layout/widget/links.ejs","hash":"97f6dbf5b69754d26965f1c8b0873b5d2fd2e488","modified":1466731721280},{"_id":"themes/icarus/layout/widget/recent_posts.ejs","hash":"7767972b9d0cba456f0e0cff1b96b516936414ea","modified":1466582223695},{"_id":"themes/icarus/layout/widget/tag.ejs","hash":"cf8a87b0573c9ff11d82ca5edb86267f77e11589","modified":1466582223696},{"_id":"themes/icarus/layout/widget/category.ejs","hash":"81c6c0a3450e1ab56a725bb953a5021a07c0e212","modified":1466582223695},{"_id":"themes/icarus/layout/share/bdshare.ejs","hash":"d2a0826700c51d9edaf21fa6cbb047b5127cec8a","modified":1466660862023},{"_id":"themes/icarus/layout/widget/tagcloud.ejs","hash":"a4b28996e0e7df2e582387455c02f5c33f691bbd","modified":1466582223696},{"_id":"themes/icarus/layout/search/baidu.ejs","hash":"8cc6f6e601b14d310f20eaf29dc55d6c60ab4ee4","modified":1466582223692},{"_id":"themes/icarus/layout/search/index-mobile.ejs","hash":"8e2e28b37a908f60e4953bf9175a7af329d15d40","modified":1466582223692},{"_id":"themes/icarus/layout/search/index.ejs","hash":"fb1ac5d6b44dbc96cbef7ecdbb6397c3d4fe3e0f","modified":1466582223692},{"_id":"themes/icarus/layout/search/insight.ejs","hash":"21ec59e4534ac2417d6b215b6cfe3825245ad340","modified":1466582223692},{"_id":"themes/icarus/layout/search/swiftype.ejs","hash":"cce9c44180d9490f45b30b8f052ac82675a9d66a","modified":1466582223692},{"_id":"themes/icarus/source/css/_highlight/agate.styl","hash":"c01db6c4e7648b217048a8deefeee189688a9290","modified":1466582223698},{"_id":"themes/icarus/source/css/_highlight/arduino-light.styl","hash":"591962bfc758a521b4cb907750c19a1a2423b4d5","modified":1466582223698},{"_id":"themes/icarus/source/css/_highlight/arta.styl","hash":"3bc322455f657aa29f455f91009034af08cdc65c","modified":1466582223698},{"_id":"themes/icarus/source/css/_highlight/ascetic.styl","hash":"ca087a3c70998c7ac6b0b42d5cf7a653b8707591","modified":1466582223699},{"_id":"themes/icarus/source/css/_highlight/androidstudio.styl","hash":"b0923fe15d0b5eb24d3c6236cb2fc30ee14a4c56","modified":1466582223698},{"_id":"themes/icarus/source/css/_highlight/atelier-cave-dark.styl","hash":"a6b1960d8a3b39d035e06ce92af4f00a259b5c56","modified":1466582223699},{"_id":"themes/icarus/source/css/_highlight/atelier-cave-light.styl","hash":"f47de0b9d66617728f68096ed48371dd6bb9e67a","modified":1466582223699},{"_id":"themes/icarus/source/css/_highlight/atelier-dune-dark.styl","hash":"68021a92fd7d6895426d0cc7f0929aa95633d742","modified":1466582223699},{"_id":"themes/icarus/source/css/_highlight/atelier-dune-light.styl","hash":"657fe215931fd06e21b56374df699a94890f7ab4","modified":1466582223699},{"_id":"themes/icarus/source/css/_highlight/atelier-estuary-dark.styl","hash":"6c051f034c229c49ffc9a2ec96c032441b0c6586","modified":1466582223700},{"_id":"themes/icarus/source/css/_highlight/atelier-estuary-light.styl","hash":"2b416a0567a53aa0fa8898b196ddd44315c1a5f3","modified":1466582223700},{"_id":"themes/icarus/source/css/_highlight/atelier-forest-dark.styl","hash":"15559324ee3a5f9bf6724ec9606f6f2e16cdc24d","modified":1466582223700},{"_id":"themes/icarus/source/css/_highlight/atelier-forest-light.styl","hash":"8d7c7242974aa2454fa792c5d7a47c5f9632355a","modified":1466582223700},{"_id":"themes/icarus/source/css/_highlight/atelier-heath-dark.styl","hash":"bf62cafe316eb874f1f43679957dc3add4fbea34","modified":1466582223700},{"_id":"themes/icarus/source/css/_highlight/atelier-heath-light.styl","hash":"c1db353e8613607580d40b12ddc162d029560576","modified":1466582223701},{"_id":"themes/icarus/source/css/_highlight/atelier-lakeside-dark.styl","hash":"64ab6ab93a092a890d3d0fdeb23e4b6a2d0f2887","modified":1466582223701},{"_id":"themes/icarus/source/css/_highlight/atelier-lakeside-light.styl","hash":"8659eaae6a0c2e00b4b9199803e50adf4ff0128d","modified":1466582223701},{"_id":"themes/icarus/source/css/_highlight/atelier-plateau-dark.styl","hash":"8a6c187afcd60152306c003e1a5903e57d9428dd","modified":1466582223701},{"_id":"themes/icarus/source/css/_highlight/atelier-plateau-light.styl","hash":"96181544eeadc5b0749229f11607e7c01f81e078","modified":1466582223701},{"_id":"themes/icarus/source/css/_highlight/atelier-seaside-dark.styl","hash":"434b7f0bdd5f91bf79d5b4ca46820db4a8e10166","modified":1466582223702},{"_id":"themes/icarus/source/css/_highlight/atelier-savanna-light.styl","hash":"8a5207a0c30262a0bf5e1a41411a306f7a89a7e7","modified":1466582223702},{"_id":"themes/icarus/source/css/_highlight/atelier-savanna-dark.styl","hash":"5261a100e84cf34f4752c24dfaddfa05c7be96f7","modified":1466582223702},{"_id":"themes/icarus/source/css/_highlight/atelier-seaside-light.styl","hash":"08e2df313c272d5c70c93e713639663c168180d0","modified":1466582223702},{"_id":"themes/icarus/source/css/_highlight/atelier-sulphurpool-dark.styl","hash":"fa0cccd0f0dc015218cf8c1bba0b53c8c9383135","modified":1466582223702},{"_id":"themes/icarus/source/css/_highlight/atelier-sulphurpool-light.styl","hash":"add3d88c9d12567dcfae7a8e49984d119fc72227","modified":1466582223703},{"_id":"themes/icarus/source/css/_highlight/brown-paper.styl","hash":"d14846542a26b75fd26df5b5df6c5493733f73f6","modified":1466582223703},{"_id":"themes/icarus/source/css/_highlight/brown-papersq.png","hash":"3a1332ede3a75a3d24f60b6ed69035b72da5e182","modified":1466582223703},{"_id":"themes/icarus/source/css/_highlight/codepen-embed.styl","hash":"7432ce9edb047b6382d28c82054a7e2a77e476c3","modified":1466582223704},{"_id":"themes/icarus/source/css/_highlight/color-brewer.styl","hash":"9c4905eab730d0b389e6972e907057577f7e25f1","modified":1466582223704},{"_id":"themes/icarus/source/css/_highlight/darkula.styl","hash":"3c943561a885092286ec8db14e9177036bf8d21f","modified":1466582223704},{"_id":"themes/icarus/source/css/_highlight/dark.styl","hash":"df4c1dc05567ad0812d0cd3133cb2a2a5fd23c04","modified":1466582223704},{"_id":"themes/icarus/source/css/_highlight/docco.styl","hash":"7bd3389ce16d20488ab336d557056cc703c921c7","modified":1466582223704},{"_id":"themes/icarus/source/css/_highlight/far.styl","hash":"5989aea14ccd0153d17ee19b3e125dae06c75f3c","modified":1466582223705},{"_id":"themes/icarus/source/css/_highlight/foundation.styl","hash":"28c59a31467c33bd51cbf3b6085782c2a724ff6c","modified":1466582223705},{"_id":"themes/icarus/source/css/_highlight/github-gist.styl","hash":"71f4b0fca91a587e6eba15a5306dca963bb8f441","modified":1466582223705},{"_id":"themes/icarus/source/css/_highlight/googlecode.styl","hash":"7f5082ae008925a23eb713f160773fe647eb3ff7","modified":1466582223706},{"_id":"themes/icarus/source/css/_highlight/highlightjs.styl","hash":"fd796a58c5d4590cda67c998187933788d45f30a","modified":1466582223706},{"_id":"themes/icarus/source/css/_highlight/grayscale.styl","hash":"c83804abe39faebd80f8f4ff64fbd7137674cb1c","modified":1466582223706},{"_id":"themes/icarus/source/css/_highlight/github.styl","hash":"a84eb710b302006120c3e7f8ca18f9e6fbc231c3","modified":1466582223705},{"_id":"themes/icarus/source/css/_highlight/hopscotch.styl","hash":"7ec8d75a9c9d58f65868ea64289873302d3fad5e","modified":1466582223706},{"_id":"themes/icarus/source/css/_highlight/idea.styl","hash":"e284c1760e8da0848f56cd5601d867ceeb0192d7","modified":1466582223707},{"_id":"themes/icarus/source/css/_highlight/hybrid.styl","hash":"d3ee1bcefc94f5f87a2b76a689f4c31594501d07","modified":1466582223707},{"_id":"themes/icarus/source/css/_highlight/ir-black.styl","hash":"c59db73998af32ce8419a5d2d335bcc9cfbaae45","modified":1466582223707},{"_id":"themes/icarus/source/css/_highlight/kimbie.dark.styl","hash":"3b998c640eeb2c6192fee24bc78b4137de475dd7","modified":1466582223707},{"_id":"themes/icarus/source/css/_highlight/index.styl","hash":"57298fa8ae862ac69f2e368957e2e63bb22bf3b8","modified":1466582223707},{"_id":"themes/icarus/source/css/_highlight/kimbie.light.styl","hash":"e901738455ec9a1bddde7b62bbd8595de6033e1e","modified":1466582223708},{"_id":"themes/icarus/source/css/_highlight/magula.styl","hash":"ab179306c12a1cf2949482beaca328e379ef034a","modified":1466582223708},{"_id":"themes/icarus/source/css/_highlight/mono-blue.styl","hash":"14fb8678739b77f35771b6d63101ddbf1e7a9fbc","modified":1466582223708},{"_id":"themes/icarus/source/css/_highlight/monokai-sublime.styl","hash":"32955f699687b5fc2e4072804cb90925912d3c7c","modified":1466582223708},{"_id":"themes/icarus/source/css/_highlight/monokai.styl","hash":"8489fc71bedefa8f271808126296fce6381f9e04","modified":1466582223709},{"_id":"themes/icarus/source/css/_highlight/obsidian.styl","hash":"8145db8ec349548f09d91d7a05c00c83ff84d146","modified":1466582223709},{"_id":"themes/icarus/source/css/_highlight/paraiso-dark.styl","hash":"50f1cee8a5b3b165b4184ead0a99dc564b62ef4f","modified":1466582223709},{"_id":"themes/icarus/source/css/_highlight/paraiso-light.styl","hash":"e428e8202b01e83b0f018a96058d806e7f4c76bf","modified":1466582223709},{"_id":"themes/icarus/source/css/_highlight/pojoaque.styl","hash":"d9f4b35c9f6115029600a8a023b559013e2b4e75","modified":1466582223710},{"_id":"themes/icarus/source/css/_highlight/railscasts.styl","hash":"1ff800d9b6de464fafe591682cc48bf983202758","modified":1466582223710},{"_id":"themes/icarus/source/css/_highlight/pojoaque.jpg","hash":"c5fe6533b88b21f8d90d3d03954c6b29baa67791","modified":1466582223709},{"_id":"themes/icarus/source/css/_highlight/rainbow.styl","hash":"516c7080d64b12730357358dee2adc42c43c4516","modified":1466582223710},{"_id":"themes/icarus/source/css/_highlight/school-book.png","hash":"711ec983c874e093bb89eb77afcbdf6741fa61ee","modified":1466582223710},{"_id":"themes/icarus/source/css/_highlight/school-book.styl","hash":"186c37e9c39e65aa291cce3317e35904693598d1","modified":1466582223710},{"_id":"themes/icarus/source/css/_highlight/solarized-dark.styl","hash":"577458d1f6c02bc42e312066bf7dd7e427cab057","modified":1466582223711},{"_id":"themes/icarus/source/css/_highlight/solarized-light.styl","hash":"bb04944fc06c12ecd7b56ad933dbedde60c2259a","modified":1466582223711},{"_id":"themes/icarus/source/css/_highlight/sunburst.styl","hash":"482bbb2bc461b22e9d6ce55f0f84767e1cfae99a","modified":1466582223711},{"_id":"themes/icarus/source/css/_highlight/tomorrow-night-blue.styl","hash":"eeafa86697c857c4e9a84ad48c0d56a7154997a3","modified":1466582223711},{"_id":"themes/icarus/source/css/_highlight/tomorrow-night-bright.styl","hash":"f3cd5ed391d40265e36fcd9f7daced52773fb886","modified":1466582223711},{"_id":"themes/icarus/source/css/_highlight/tomorrow-night-eighties.styl","hash":"1cd947f3d414fa5c1435caea509f27c99f6dc5b3","modified":1466582223712},{"_id":"themes/icarus/source/css/_highlight/tomorrow-night.styl","hash":"b2a175caa23631f764b2f6fe2bac9739f5f5e078","modified":1466582223712},{"_id":"themes/icarus/source/css/_highlight/tomorrow.styl","hash":"502335f0fac07ed74ca78207bcf3ef8dd2252cf6","modified":1466582223712},{"_id":"themes/icarus/source/css/_highlight/vs.styl","hash":"14fbb0c43af440a290280b26968c8a5c0786b27f","modified":1466582223712},{"_id":"themes/icarus/source/css/_highlight/xcode.styl","hash":"5fa8999c7f807c1aae29c7a1cdf681678576fb69","modified":1466582223712},{"_id":"themes/icarus/source/css/_util/grid.styl","hash":"866fc18d6368c4131b03601a15af7703a9a42b61","modified":1466582223715},{"_id":"themes/icarus/source/css/_util/mixin.styl","hash":"3f8730ec2b1b582ba93b14f0e50a41fbbce52755","modified":1466582223715},{"_id":"themes/icarus/source/css/_highlight/zenburn.styl","hash":"6908313d2666d31fc9d8658fd7e8dda3de2bb596","modified":1466582223713},{"_id":"themes/icarus/source/css/_partial/article.styl","hash":"a50c1006ba96359695b0c2bf6ec997493ec0b4e5","modified":1466582223713},{"_id":"themes/icarus/source/css/_partial/comment.styl","hash":"7fc8a32cf235d0a977d9ff0c49263c0541025222","modified":1466582223713},{"_id":"themes/icarus/source/css/_partial/archive.styl","hash":"68fdfc3ba48950e63fcebe66ee911376cd7ee389","modified":1466582223713},{"_id":"themes/icarus/source/css/_partial/insight.styl","hash":"8a84868a13c7edb733347655b33dc169c682e8b8","modified":1466582223714},{"_id":"themes/icarus/source/css/_partial/profile.styl","hash":"dfa3eab5933c6af4dfb7268c511157cbb926dcfa","modified":1466582223714},{"_id":"themes/icarus/source/css/_partial/header.styl","hash":"218713de00dc6c503e7036fce2aab81dd94b4c0c","modified":1466582223714},{"_id":"themes/icarus/source/css/_partial/sidebar.styl","hash":"fb211c3c747565e6fa2304f436b42d14ef84d71a","modified":1466582223715},{"_id":"themes/icarus/source/css/_partial/timeline.styl","hash":"ba1ea8a87ca7c667f0d3cc40033b52bdf168fbdd","modified":1466582223715},{"_id":"themes/icarus/source/css/images/avatar.png","hash":"0d8236dcca871735500e9d06bbdbe0853ed6775b","modified":1466582223716},{"_id":"themes/icarus/source/css/images/logo.png","hash":"e606a0584f98268b2fe92303f3254520862ef659","modified":1466582223716},{"_id":"themes/icarus/source/css/images/thumb-default-small.png","hash":"e8403b97ed9251f9f5207765b0ce796c5000b4ba","modified":1466582223717},{"_id":"themes/icarus/source/css/_partial/footer.styl","hash":"06c2c9029ebfb16880a203c218657048a83a3e4b","modified":1466582223714},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_loading.gif","hash":"1a755fb2599f3a313cc6cfdb14df043f8c14a99c","modified":1466582223718},{"_id":"themes/icarus/source/vendor/fancybox/blank.gif","hash":"2daeaa8b5f19f0bc209d976c02bd6acb51b00b0a","modified":1466582223718},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_overlay.png","hash":"b3a4ee645ba494f52840ef8412015ba0f465dbe0","modified":1466582223719},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_sprite.png","hash":"17df19f97628e77be09c352bf27425faea248251","modified":1466582223719},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_sprite@2x.png","hash":"30c58913f327e28f466a00f4c1ac8001b560aed8","modified":1466582223719},{"_id":"themes/icarus/source/vendor/fancybox/fancybox_loading@2x.gif","hash":"273b123496a42ba45c3416adb027cd99745058b0","modified":1466582223719},{"_id":"themes/icarus/source/vendor/fancybox/jquery.fancybox.css","hash":"7d6fb89347808ccb2a6b4e4cc28fbf18f179109e","modified":1466582223721},{"_id":"themes/icarus/source/vendor/fancybox/jquery.fancybox.js","hash":"58193c802f307ec9bc9e586c0e8a13ebef45d2f8","modified":1466582223722},{"_id":"themes/icarus/source/vendor/fancybox/jquery.fancybox.pack.js","hash":"2da892a02778236b64076e5e8802ef0566e1d9e8","modified":1466582223723},{"_id":"themes/icarus/source/vendor/open-sans/styles.css","hash":"08c8c7eeaf34cb2f8c3312a3ce2e96b58ce2b4c0","modified":1466582223737},{"_id":"themes/icarus/source/vendor/source-code-pro/styles.css","hash":"6335d719343cca455152ad71a1aaed9868339236","modified":1466582223738},{"_id":"themes/icarus/layout/common/post/banner.ejs","hash":"431b445dfa5dec4b710069c7f1b5fae3f0a907a5","modified":1466582223687},{"_id":"themes/icarus/layout/common/post/author.ejs","hash":"5ca574dc33976acb41be745ad627daef7213a495","modified":1466582313426},{"_id":"themes/icarus/layout/common/post/category.ejs","hash":"96f999573eb908f7129a1c09e486d46d630c0a7d","modified":1466582223687},{"_id":"themes/icarus/layout/common/post/date.ejs","hash":"fc90dbfc227563029ece7cff13585083b62935bc","modified":1466582223687},{"_id":"themes/icarus/layout/common/post/tag.ejs","hash":"7df16851b35da0ea09f7323bdbfb977198823f4c","modified":1466582223688},{"_id":"themes/icarus/layout/common/post/title.ejs","hash":"3620e4dad9c7f9c31efd4ad6cf5872cfb9d418c2","modified":1466582223688},{"_id":"themes/icarus/layout/common/post/nav.ejs","hash":"79d15e00ead668bf44a48f4e870ac0cde9dbdee3","modified":1466582223688},{"_id":"themes/icarus/layout/common/post/gallery.ejs","hash":"941fbf13acbb39490ee81ffaf4baf4b3f0956407","modified":1466582223687},{"_id":"themes/icarus/source/vendor/font-awesome/css/font-awesome.min.css","hash":"3e435d5167460aaf367836e1973e90a47039faea","modified":1466582223723},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.eot","hash":"3e63fc9b3de4580f1f3bec0631436f755b80f167","modified":1466582223725},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.woff2","hash":"1075231650f579955905bb2f6527148a8e2b4b16","modified":1466582223730},{"_id":"themes/icarus/source/vendor/open-sans/fonts/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2","hash":"c4248ea800bd5608344ce163f5658b57e7ef9410","modified":1466582223732},{"_id":"themes/icarus/source/vendor/open-sans/fonts/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2","hash":"e0350190d720a8fec0557ab47b318ec4e4486448","modified":1466582223732},{"_id":"themes/icarus/source/vendor/open-sans/fonts/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2","hash":"2c5b039b57f62625e88226a938679ec937431ad1","modified":1466582223732},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2","hash":"22413bb8bfb78608c1e25aa1ed5c1f38557df79f","modified":1466582223732},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2","hash":"63eb74ef040aade256f2274a7f31a914edddb0ea","modified":1466582223733},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2","hash":"328a22fe3eec71ad9e5ece4d67dd62e79dab6b7f","modified":1466582223733},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2","hash":"4dc6d7174ea6d89f4c45e43e1bfc3e03d8ffebaf","modified":1466582223733},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2","hash":"415eee05976ab8b2471602a5ddb78a6c58fc21aa","modified":1466582223733},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2","hash":"a0b0c389cf46d63c850e61fed572485ff0b68183","modified":1466582223734},{"_id":"themes/icarus/source/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2","hash":"c5f29fed6632efe0aa83318369f0d8c4061b775b","modified":1466582223734},{"_id":"themes/icarus/source/vendor/open-sans/fonts/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2","hash":"be201d32a9aa5d186723ebb3c538be691aa8c53a","modified":1466582223734},{"_id":"themes/icarus/source/vendor/open-sans/fonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2","hash":"afc44700053c9a28f9ab26f6aec4862ac1d0795d","modified":1466582223734},{"_id":"themes/icarus/source/vendor/open-sans/fonts/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2","hash":"113978181dcac77baecef6115a9121d8f6e4fc3a","modified":1466582223735},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBiYE0-AqJ3nfInTTiDXDjU4.woff2","hash":"5067c81462c15422853c94d21a1726865a61634f","modified":1466582223735},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBjTOQ_MqJVwkKsUn0wKzc2I.woff2","hash":"b366f2fda2e524eb5ef50058eefff249a3b96e6c","modified":1466582223735},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBkbcKLIaa1LC45dFaAfauRA.woff2","hash":"ae80fb3cd16339aa7b5da280ab53975523dcaac2","modified":1466582223736},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBjUj_cnvWIuuBMVgbX098Mw.woff2","hash":"d22904914469be735490e3c8cb093c7862896dd5","modified":1466582223735},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBmo_sUJ8uO4YLWRInS22T3Y.woff2","hash":"b85efde42fa3a03c32b1d31c6cd74c622fc7916c","modified":1466582223736},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2","hash":"be365eca44760ce3fc9b377c43d4634958479c69","modified":1466582223737},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBr6up8jxqWt8HVA3mDhkV_0.woff2","hash":"d0b40a7848703556c6631f24e961a98ca5829255","modified":1466582223736},{"_id":"themes/icarus/source/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2","hash":"e75607ba1417181397c700775b84303d5a2957b9","modified":1466582223736},{"_id":"themes/icarus/source/vendor/source-code-pro/fonts/mrl8jkM18OlOQN8JLgasDy2Q8seG17bfDXYR_jUsrzg.woff2","hash":"b0e0bb5ef78db8b15d430d0b9be9d4329289a310","modified":1466582223738},{"_id":"themes/icarus/source/vendor/source-code-pro/fonts/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2","hash":"942addaec4d3a60af33947a84a3d85f926015947","modified":1466582223737},{"_id":"themes/icarus/source/vendor/fancybox/helpers/fancybox_buttons.png","hash":"e385b139516c6813dcd64b8fc431c364ceafe5f3","modified":1466582223720},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-buttons.css","hash":"6394c48092085788a8c0ef72670b0652006231a1","modified":1466582223720},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-buttons.js","hash":"4c9c395d705d22af7da06870d18f434e2a2eeaf9","modified":1466582223720},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-thumbs.css","hash":"b88b589f5f1aa1b3d87cc7eef34c281ff749b1ae","modified":1466582223721},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-thumbs.js","hash":"83cdfea43632b613771691a11f56f99d85fb6dbd","modified":1466582223721},{"_id":"themes/icarus/source/vendor/fancybox/helpers/jquery.fancybox-media.js","hash":"e14c32cc6823b81b2f758512f13ed8eb9ef2b454","modified":1466582223721},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/FontAwesome.otf","hash":"cde9eb92c8a3ba23d648f76ea3931511f30813f4","modified":1466582223724},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.ttf","hash":"9088143b19979779b2116cef38b661f72d982e19","modified":1466582223729},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.woff","hash":"56ce13e71c2150d81bc972940584915181bd6081","modified":1466582223729},{"_id":"themes/icarus/source/vendor/jquery/2.1.3/jquery.min.js","hash":"17a740d68a1c330876c198b6a4d9319f379f3af2","modified":1466582223731},{"_id":"themes/icarus/source/vendor/font-awesome/fonts/fontawesome-webfont.svg","hash":"0b42e5ee7daafb72b1237b9d5b7f5ab0775fffc7","modified":1466582223727},{"_id":"public/atom.xml","hash":"9a66762db6aa6ca1ac7ae4bab82f2841c49fe012","modified":1467362730510},{"_id":"public/content.json","hash":"f0aeb0e940de8a37a127ede813139c9b66898809","modified":1467362730635},{"_id":"public/sitemap.xml","hash":"13aa2f44501d483e5d47f8ab99b6a50fd8f4a509","modified":1467362730636},{"_id":"public/archives/index.html","hash":"6b3b8c1250aaff8bdccdef3410e543c0aa81309a","modified":1467362730641},{"_id":"public/archives/2016/index.html","hash":"7886df29a3d55ae39dc395fb9368b5b63772c33a","modified":1467362730642},{"_id":"public/archives/2016/06/index.html","hash":"bc68a79f726b6042f165481dd762a02907fc8077","modified":1467362730642},{"_id":"public/archives/2016/07/index.html","hash":"6796c86a5c6a4e968e39cf14608e3fe4bb44a02c","modified":1467362730642},{"_id":"public/tags/技术文档/index.html","hash":"10f66c483f3d348ff680eca3f40826f5bf7f8fbb","modified":1467362730642},{"_id":"public/tags/分享日志/index.html","hash":"0633a31d8826189c33dbc0805720a062f0310684","modified":1467362730642},{"_id":"public/2016/07/01/Local-Storage/index.html","hash":"bfbeb88fa50c148570a8172616626b554e6f4614","modified":1467362730642},{"_id":"public/2016/06/23/Hexo书写博客/index.html","hash":"598063bdcb0aaf0cb51b99b6a5a3b3b717437d2c","modified":1467362730642},{"_id":"public/2016/06/17/webpack从入门到精通（一）/index.html","hash":"77883d41fcaf2f933932f922f6e0f5b769db3267","modified":1467362730642},{"_id":"public/index.html","hash":"9fa09656927804ac040630a695a73a498a303116","modified":1467362730642},{"_id":"public/img/favicon.ico","hash":"a5e48dbf59d3686a68137760ade2593c793a7b6b","modified":1467362730659},{"_id":"public/img/王阳/img1.png","hash":"20cf971c375844446f974c009f8c556215380790","modified":1467362730659},{"_id":"public/img/王阳/img3.png","hash":"ecea72c80dd35334e8eacb5889421390608b8d12","modified":1467362730660},{"_id":"public/img/王阳/img4.png","hash":"8236985dbd2e826246fe2df554960b0215ca48ca","modified":1467362730660},{"_id":"public/img/王阳/img2.png","hash":"f39fcf40b820b4d7095afd45e37384e734959fba","modified":1467362730660},{"_id":"public/css/images/avatar.png","hash":"0d8236dcca871735500e9d06bbdbe0853ed6775b","modified":1467362730660},{"_id":"public/css/images/logo.png","hash":"e606a0584f98268b2fe92303f3254520862ef659","modified":1467362730660},{"_id":"public/css/images/thumb-default-small.png","hash":"e8403b97ed9251f9f5207765b0ce796c5000b4ba","modified":1467362730660},{"_id":"public/vendor/fancybox/fancybox_loading.gif","hash":"1a755fb2599f3a313cc6cfdb14df043f8c14a99c","modified":1467362730660},{"_id":"public/vendor/fancybox/blank.gif","hash":"2daeaa8b5f19f0bc209d976c02bd6acb51b00b0a","modified":1467362730660},{"_id":"public/vendor/fancybox/fancybox_overlay.png","hash":"b3a4ee645ba494f52840ef8412015ba0f465dbe0","modified":1467362730660},{"_id":"public/vendor/fancybox/fancybox_sprite.png","hash":"17df19f97628e77be09c352bf27425faea248251","modified":1467362730660},{"_id":"public/vendor/fancybox/fancybox_sprite@2x.png","hash":"30c58913f327e28f466a00f4c1ac8001b560aed8","modified":1467362730660},{"_id":"public/vendor/fancybox/fancybox_loading@2x.gif","hash":"273b123496a42ba45c3416adb027cd99745058b0","modified":1467362730660},{"_id":"public/vendor/font-awesome/fonts/fontawesome-webfont.eot","hash":"3e63fc9b3de4580f1f3bec0631436f755b80f167","modified":1467362730660},{"_id":"public/vendor/font-awesome/fonts/fontawesome-webfont.woff2","hash":"1075231650f579955905bb2f6527148a8e2b4b16","modified":1467362730660},{"_id":"public/vendor/open-sans/fonts/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2","hash":"c4248ea800bd5608344ce163f5658b57e7ef9410","modified":1467362730660},{"_id":"public/vendor/open-sans/fonts/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2","hash":"e0350190d720a8fec0557ab47b318ec4e4486448","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2","hash":"22413bb8bfb78608c1e25aa1ed5c1f38557df79f","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2","hash":"63eb74ef040aade256f2274a7f31a914edddb0ea","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2","hash":"2c5b039b57f62625e88226a938679ec937431ad1","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2","hash":"328a22fe3eec71ad9e5ece4d67dd62e79dab6b7f","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2","hash":"4dc6d7174ea6d89f4c45e43e1bfc3e03d8ffebaf","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2","hash":"415eee05976ab8b2471602a5ddb78a6c58fc21aa","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2","hash":"a0b0c389cf46d63c850e61fed572485ff0b68183","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2","hash":"c5f29fed6632efe0aa83318369f0d8c4061b775b","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2","hash":"be201d32a9aa5d186723ebb3c538be691aa8c53a","modified":1467362730661},{"_id":"public/vendor/open-sans/fonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2","hash":"afc44700053c9a28f9ab26f6aec4862ac1d0795d","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2","hash":"113978181dcac77baecef6115a9121d8f6e4fc3a","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBiYE0-AqJ3nfInTTiDXDjU4.woff2","hash":"5067c81462c15422853c94d21a1726865a61634f","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBjTOQ_MqJVwkKsUn0wKzc2I.woff2","hash":"b366f2fda2e524eb5ef50058eefff249a3b96e6c","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBkbcKLIaa1LC45dFaAfauRA.woff2","hash":"ae80fb3cd16339aa7b5da280ab53975523dcaac2","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBjUj_cnvWIuuBMVgbX098Mw.woff2","hash":"d22904914469be735490e3c8cb093c7862896dd5","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBmo_sUJ8uO4YLWRInS22T3Y.woff2","hash":"b85efde42fa3a03c32b1d31c6cd74c622fc7916c","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2","hash":"be365eca44760ce3fc9b377c43d4634958479c69","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBr6up8jxqWt8HVA3mDhkV_0.woff2","hash":"d0b40a7848703556c6631f24e961a98ca5829255","modified":1467362730662},{"_id":"public/vendor/open-sans/fonts/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2","hash":"e75607ba1417181397c700775b84303d5a2957b9","modified":1467362730662},{"_id":"public/vendor/source-code-pro/fonts/mrl8jkM18OlOQN8JLgasDy2Q8seG17bfDXYR_jUsrzg.woff2","hash":"b0e0bb5ef78db8b15d430d0b9be9d4329289a310","modified":1467362730662},{"_id":"public/vendor/source-code-pro/fonts/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2","hash":"942addaec4d3a60af33947a84a3d85f926015947","modified":1467362730662},{"_id":"public/vendor/fancybox/helpers/fancybox_buttons.png","hash":"e385b139516c6813dcd64b8fc431c364ceafe5f3","modified":1467362730662},{"_id":"public/vendor/font-awesome/fonts/FontAwesome.otf","hash":"cde9eb92c8a3ba23d648f76ea3931511f30813f4","modified":1467362731147},{"_id":"public/vendor/font-awesome/fonts/fontawesome-webfont.ttf","hash":"9088143b19979779b2116cef38b661f72d982e19","modified":1467362731148},{"_id":"public/vendor/font-awesome/fonts/fontawesome-webfont.woff","hash":"56ce13e71c2150d81bc972940584915181bd6081","modified":1467362731149},{"_id":"public/js/main.js","hash":"78310af1f302bfa1b1d704537ef40d868ead2dcf","modified":1467362731155},{"_id":"public/js/insight.js","hash":"6ee84c42c2b230ff9e9bf605a444bd671d44f9e3","modified":1467362731155},{"_id":"public/vendor/fancybox/jquery.fancybox.css","hash":"9673e160d32c4811bb7e930ba1e20c36b2997fe1","modified":1467362731155},{"_id":"public/vendor/source-code-pro/styles.css","hash":"93c308012738728f906cd4c5cfdb34189e0c712b","modified":1467362731155},{"_id":"public/vendor/open-sans/styles.css","hash":"5ca6e111046232bde112d33201a60532aee7d3c4","modified":1467362731155},{"_id":"public/vendor/fancybox/helpers/jquery.fancybox-buttons.css","hash":"1a9d8e5c22b371fcc69d4dbbb823d9c39f04c0c8","modified":1467362731155},{"_id":"public/vendor/fancybox/helpers/jquery.fancybox-buttons.js","hash":"dc3645529a4bf72983a39fa34c1eb9146e082019","modified":1467362731155},{"_id":"public/vendor/fancybox/helpers/jquery.fancybox-thumbs.css","hash":"4ac329c16a5277592fc12a37cca3d72ca4ec292f","modified":1467362731155},{"_id":"public/vendor/fancybox/helpers/jquery.fancybox-thumbs.js","hash":"47da1ae5401c24b5c17cc18e2730780f5c1a7a0c","modified":1467362731155},{"_id":"public/vendor/fancybox/helpers/jquery.fancybox-media.js","hash":"294420f9ff20f4e3584d212b0c262a00a96ecdb3","modified":1467362731155},{"_id":"public/css/style.css","hash":"658e8b0cdc3d801b956a68f24d2b73231875b40c","modified":1467362731155},{"_id":"public/vendor/fancybox/jquery.fancybox.js","hash":"d08b03a42d5c4ba456ef8ba33116fdbb7a9cabed","modified":1467362731155},{"_id":"public/vendor/fancybox/jquery.fancybox.pack.js","hash":"9e0d51ca1dbe66f6c0c7aefd552dc8122e694a6e","modified":1467362731155},{"_id":"public/vendor/font-awesome/css/font-awesome.min.css","hash":"8c15c6bd82c71e9ef1bb11cf24e502fe07518ac5","modified":1467362731155},{"_id":"public/vendor/jquery/2.1.3/jquery.min.js","hash":"41b4bfbaa96be6d1440db6e78004ade1c134e276","modified":1467362731155},{"_id":"public/vendor/font-awesome/fonts/fontawesome-webfont.svg","hash":"0b42e5ee7daafb72b1237b9d5b7f5ab0775fffc7","modified":1467362731164}],"Category":[],"Data":[],"Page":[],"Post":[{"title":"Hexo书写博客","date":"2016-06-23T01:12:39.000Z","author":"王阳","photos":["http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg"],"_content":"## Hexo简介\nA fast, simple & powerful blog framework, powered by [Node.js](http://nodejs.org).\n\n## 工具推荐\n- WebStorm\n- Visual Studio Code\n- MarkdownPad\n\n## 安装步骤\n##### 1. 首先得有[Node.js](http://nodejs.org).\n\n##### 2. 其次全局安装hexo\n``` bash\n$ npm install -g hexo\n```\n\n##### 3. git clone 克隆配置完好的Hexo环境\n``` bash\n$ git clone git@github.com:TC-Flight-Int-Web/blog.git\n$ cd blog\n$ git pull origin master //获取最新的代码，防止冲突，搞掉其他人文章\n```\n> 记住一定要**获取最新的代码**\n\n\n##### 4. 进入对应目录,安装对应依赖包\n``` bash\n$ cd blog\n$ npm install\n```\n\n##### 5. 创建一篇文章\n``` bash\n$ hexo new \"Hello Hexo\"\n$ INFO  Created: [绝对路径]\\blog\\source\\_posts\\hello-hexo.md\n```\n\n##### 6. 本地书写文章打开对应目录文件\n``` bash\n$ 打开对应目录文件【[绝对路径]\\blog\\source\\_posts\\hello-hexo.md】\n```\n\n##### 7. 打开markdown，默认情况\n![markdown默认情况](/img/王阳/img1.png)\n> \n  - title 文章标题\n  - date 发布时间\n  - tags 标签\n  - author 作者\n  \n##### 8. markdown语法书写\n![](/img/王阳/img2.png)\n- 添加图片统一路径\n    ![保存图片路径](/img/王阳/img3.png) \n- 图片添加的语法\n    ![图片markdown语法](/img/王阳/img4.png)\n\n##### 9. 启动Hexo Server 本地查看\n``` bash\n$ hexo s\n$ INFO  Start processing\n$ INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.\n```\n\n##### 10. 发布文章\n``` bash\n$ hexo clean //清除缓存\n$ hexo d\n$ INFO  Deploying: git\n$ INFO  Clearing .deploy_git folder...\n$ INFO  Copying files from public folder...\n$ INFO  Deploy done: git\n```\n> \n  - 发布执行请先hexo clean 清除发布历史数据\n  - 目前发布文章需要手动输入github用户名和密码进行发布\n\n##### 11. 提交代码，防止其他人搞掉你的文章\n``` bash\n$ git pull origin master\n$ git add .\n$ git commit -m \"文章书写\"\n$ git push origin master\n```","source":"_posts/Hexo书写博客.md","raw":"---\ntitle: Hexo书写博客\ndate: 2016-06-23 09:12:39\ntags: 技术文档\nauthor: 王阳\nphotos:\n- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg\n---\n## Hexo简介\nA fast, simple & powerful blog framework, powered by [Node.js](http://nodejs.org).\n\n## 工具推荐\n- WebStorm\n- Visual Studio Code\n- MarkdownPad\n\n## 安装步骤\n##### 1. 首先得有[Node.js](http://nodejs.org).\n\n##### 2. 其次全局安装hexo\n``` bash\n$ npm install -g hexo\n```\n\n##### 3. git clone 克隆配置完好的Hexo环境\n``` bash\n$ git clone git@github.com:TC-Flight-Int-Web/blog.git\n$ cd blog\n$ git pull origin master //获取最新的代码，防止冲突，搞掉其他人文章\n```\n> 记住一定要**获取最新的代码**\n\n\n##### 4. 进入对应目录,安装对应依赖包\n``` bash\n$ cd blog\n$ npm install\n```\n\n##### 5. 创建一篇文章\n``` bash\n$ hexo new \"Hello Hexo\"\n$ INFO  Created: [绝对路径]\\blog\\source\\_posts\\hello-hexo.md\n```\n\n##### 6. 本地书写文章打开对应目录文件\n``` bash\n$ 打开对应目录文件【[绝对路径]\\blog\\source\\_posts\\hello-hexo.md】\n```\n\n##### 7. 打开markdown，默认情况\n![markdown默认情况](/img/王阳/img1.png)\n> \n  - title 文章标题\n  - date 发布时间\n  - tags 标签\n  - author 作者\n  \n##### 8. markdown语法书写\n![](/img/王阳/img2.png)\n- 添加图片统一路径\n    ![保存图片路径](/img/王阳/img3.png) \n- 图片添加的语法\n    ![图片markdown语法](/img/王阳/img4.png)\n\n##### 9. 启动Hexo Server 本地查看\n``` bash\n$ hexo s\n$ INFO  Start processing\n$ INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.\n```\n\n##### 10. 发布文章\n``` bash\n$ hexo clean //清除缓存\n$ hexo d\n$ INFO  Deploying: git\n$ INFO  Clearing .deploy_git folder...\n$ INFO  Copying files from public folder...\n$ INFO  Deploy done: git\n```\n> \n  - 发布执行请先hexo clean 清除发布历史数据\n  - 目前发布文章需要手动输入github用户名和密码进行发布\n\n##### 11. 提交代码，防止其他人搞掉你的文章\n``` bash\n$ git pull origin master\n$ git add .\n$ git commit -m \"文章书写\"\n$ git push origin master\n```","slug":"Hexo书写博客","published":1,"updated":"2016-06-24T01:24:03.078Z","comments":1,"layout":"post","link":"","_id":"ciq3hvsrf000008d78eea1iy0","content":"<h2 id=\"Hexo简介\"><a href=\"#Hexo简介\" class=\"headerlink\" title=\"Hexo简介\"></a>Hexo简介</h2><p>A fast, simple &amp; powerful blog framework, powered by <a href=\"http://nodejs.org\" target=\"_blank\" rel=\"external\">Node.js</a>.</p>\n<h2 id=\"工具推荐\"><a href=\"#工具推荐\" class=\"headerlink\" title=\"工具推荐\"></a>工具推荐</h2><ul>\n<li>WebStorm</li>\n<li>Visual Studio Code</li>\n<li>MarkdownPad</li>\n</ul>\n<h2 id=\"安装步骤\"><a href=\"#安装步骤\" class=\"headerlink\" title=\"安装步骤\"></a>安装步骤</h2><h5 id=\"1-首先得有Node-js\"><a href=\"#1-首先得有Node-js\" class=\"headerlink\" title=\"1. 首先得有Node.js.\"></a>1. 首先得有<a href=\"http://nodejs.org\" target=\"_blank\" rel=\"external\">Node.js</a>.</h5><h5 id=\"2-其次全局安装hexo\"><a href=\"#2-其次全局安装hexo\" class=\"headerlink\" title=\"2. 其次全局安装hexo\"></a>2. 其次全局安装hexo</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ npm install -g hexo</span><br></pre></td></tr></table></figure>\n<h5 id=\"3-git-clone-克隆配置完好的Hexo环境\"><a href=\"#3-git-clone-克隆配置完好的Hexo环境\" class=\"headerlink\" title=\"3. git clone 克隆配置完好的Hexo环境\"></a>3. git clone 克隆配置完好的Hexo环境</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ git <span class=\"built_in\">clone</span> git@github.com:TC-Flight-Int-Web/blog.git</span><br><span class=\"line\">$ <span class=\"built_in\">cd</span> blog</span><br><span class=\"line\">$ git pull origin master //获取最新的代码，防止冲突，搞掉其他人文章</span><br></pre></td></tr></table></figure>\n<blockquote>\n<p>记住一定要<strong>获取最新的代码</strong></p>\n</blockquote>\n<h5 id=\"4-进入对应目录-安装对应依赖包\"><a href=\"#4-进入对应目录-安装对应依赖包\" class=\"headerlink\" title=\"4. 进入对应目录,安装对应依赖包\"></a>4. 进入对应目录,安装对应依赖包</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> blog</span><br><span class=\"line\">$ npm install</span><br></pre></td></tr></table></figure>\n<h5 id=\"5-创建一篇文章\"><a href=\"#5-创建一篇文章\" class=\"headerlink\" title=\"5. 创建一篇文章\"></a>5. 创建一篇文章</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo new <span class=\"string\">\"Hello Hexo\"</span></span><br><span class=\"line\">$ INFO  Created: [绝对路径]\\blog\\<span class=\"built_in\">source</span>\\_posts\\hello-hexo.md</span><br></pre></td></tr></table></figure>\n<h5 id=\"6-本地书写文章打开对应目录文件\"><a href=\"#6-本地书写文章打开对应目录文件\" class=\"headerlink\" title=\"6. 本地书写文章打开对应目录文件\"></a>6. 本地书写文章打开对应目录文件</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ 打开对应目录文件【[绝对路径]\\blog\\<span class=\"built_in\">source</span>\\_posts\\hello-hexo.md】</span><br></pre></td></tr></table></figure>\n<h5 id=\"7-打开markdown，默认情况\"><a href=\"#7-打开markdown，默认情况\" class=\"headerlink\" title=\"7. 打开markdown，默认情况\"></a>7. 打开markdown，默认情况</h5><p><img src=\"/img/王阳/img1.png\" alt=\"markdown默认情况\"></p>\n<blockquote>\n<ul>\n<li>title 文章标题</li>\n<li>date 发布时间</li>\n<li>tags 标签</li>\n<li>author 作者</li>\n</ul>\n</blockquote>\n<h5 id=\"8-markdown语法书写\"><a href=\"#8-markdown语法书写\" class=\"headerlink\" title=\"8. markdown语法书写\"></a>8. markdown语法书写</h5><p><img src=\"/img/王阳/img2.png\" alt=\"\"></p>\n<ul>\n<li>添加图片统一路径<br>  <img src=\"/img/王阳/img3.png\" alt=\"保存图片路径\"> </li>\n<li>图片添加的语法<br>  <img src=\"/img/王阳/img4.png\" alt=\"图片markdown语法\"></li>\n</ul>\n<h5 id=\"9-启动Hexo-Server-本地查看\"><a href=\"#9-启动Hexo-Server-本地查看\" class=\"headerlink\" title=\"9. 启动Hexo Server 本地查看\"></a>9. 启动Hexo Server 本地查看</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo s</span><br><span class=\"line\">$ INFO  Start processing</span><br><span class=\"line\">$ INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.</span><br></pre></td></tr></table></figure>\n<h5 id=\"10-发布文章\"><a href=\"#10-发布文章\" class=\"headerlink\" title=\"10. 发布文章\"></a>10. 发布文章</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo clean //清除缓存</span><br><span class=\"line\">$ hexo d</span><br><span class=\"line\">$ INFO  Deploying: git</span><br><span class=\"line\">$ INFO  Clearing .deploy_git folder...</span><br><span class=\"line\">$ INFO  Copying files from public folder...</span><br><span class=\"line\">$ INFO  Deploy <span class=\"keyword\">done</span>: git</span><br></pre></td></tr></table></figure>\n<blockquote>\n<ul>\n<li>发布执行请先hexo clean 清除发布历史数据</li>\n<li>目前发布文章需要手动输入github用户名和密码进行发布</li>\n</ul>\n</blockquote>\n<h5 id=\"11-提交代码，防止其他人搞掉你的文章\"><a href=\"#11-提交代码，防止其他人搞掉你的文章\" class=\"headerlink\" title=\"11. 提交代码，防止其他人搞掉你的文章\"></a>11. 提交代码，防止其他人搞掉你的文章</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ git pull origin master</span><br><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m <span class=\"string\">\"文章书写\"</span></span><br><span class=\"line\">$ git push origin master</span><br></pre></td></tr></table></figure>","excerpt":"","more":"<h2 id=\"Hexo简介\"><a href=\"#Hexo简介\" class=\"headerlink\" title=\"Hexo简介\"></a>Hexo简介</h2><p>A fast, simple &amp; powerful blog framework, powered by <a href=\"http://nodejs.org\">Node.js</a>.</p>\n<h2 id=\"工具推荐\"><a href=\"#工具推荐\" class=\"headerlink\" title=\"工具推荐\"></a>工具推荐</h2><ul>\n<li>WebStorm</li>\n<li>Visual Studio Code</li>\n<li>MarkdownPad</li>\n</ul>\n<h2 id=\"安装步骤\"><a href=\"#安装步骤\" class=\"headerlink\" title=\"安装步骤\"></a>安装步骤</h2><h5 id=\"1-首先得有Node-js\"><a href=\"#1-首先得有Node-js\" class=\"headerlink\" title=\"1. 首先得有Node.js.\"></a>1. 首先得有<a href=\"http://nodejs.org\">Node.js</a>.</h5><h5 id=\"2-其次全局安装hexo\"><a href=\"#2-其次全局安装hexo\" class=\"headerlink\" title=\"2. 其次全局安装hexo\"></a>2. 其次全局安装hexo</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ npm install -g hexo</span><br></pre></td></tr></table></figure>\n<h5 id=\"3-git-clone-克隆配置完好的Hexo环境\"><a href=\"#3-git-clone-克隆配置完好的Hexo环境\" class=\"headerlink\" title=\"3. git clone 克隆配置完好的Hexo环境\"></a>3. git clone 克隆配置完好的Hexo环境</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ git <span class=\"built_in\">clone</span> git@github.com:TC-Flight-Int-Web/blog.git</span><br><span class=\"line\">$ <span class=\"built_in\">cd</span> blog</span><br><span class=\"line\">$ git pull origin master //获取最新的代码，防止冲突，搞掉其他人文章</span><br></pre></td></tr></table></figure>\n<blockquote>\n<p>记住一定要<strong>获取最新的代码</strong></p>\n</blockquote>\n<h5 id=\"4-进入对应目录-安装对应依赖包\"><a href=\"#4-进入对应目录-安装对应依赖包\" class=\"headerlink\" title=\"4. 进入对应目录,安装对应依赖包\"></a>4. 进入对应目录,安装对应依赖包</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> blog</span><br><span class=\"line\">$ npm install</span><br></pre></td></tr></table></figure>\n<h5 id=\"5-创建一篇文章\"><a href=\"#5-创建一篇文章\" class=\"headerlink\" title=\"5. 创建一篇文章\"></a>5. 创建一篇文章</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo new <span class=\"string\">\"Hello Hexo\"</span></span><br><span class=\"line\">$ INFO  Created: [绝对路径]\\blog\\<span class=\"built_in\">source</span>\\_posts\\hello-hexo.md</span><br></pre></td></tr></table></figure>\n<h5 id=\"6-本地书写文章打开对应目录文件\"><a href=\"#6-本地书写文章打开对应目录文件\" class=\"headerlink\" title=\"6. 本地书写文章打开对应目录文件\"></a>6. 本地书写文章打开对应目录文件</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ 打开对应目录文件【[绝对路径]\\blog\\<span class=\"built_in\">source</span>\\_posts\\hello-hexo.md】</span><br></pre></td></tr></table></figure>\n<h5 id=\"7-打开markdown，默认情况\"><a href=\"#7-打开markdown，默认情况\" class=\"headerlink\" title=\"7. 打开markdown，默认情况\"></a>7. 打开markdown，默认情况</h5><p><img src=\"/img/王阳/img1.png\" alt=\"markdown默认情况\"></p>\n<blockquote>\n<ul>\n<li>title 文章标题</li>\n<li>date 发布时间</li>\n<li>tags 标签</li>\n<li>author 作者</li>\n</ul>\n</blockquote>\n<h5 id=\"8-markdown语法书写\"><a href=\"#8-markdown语法书写\" class=\"headerlink\" title=\"8. markdown语法书写\"></a>8. markdown语法书写</h5><p><img src=\"/img/王阳/img2.png\" alt=\"\"></p>\n<ul>\n<li>添加图片统一路径<br>  <img src=\"/img/王阳/img3.png\" alt=\"保存图片路径\"> </li>\n<li>图片添加的语法<br>  <img src=\"/img/王阳/img4.png\" alt=\"图片markdown语法\"></li>\n</ul>\n<h5 id=\"9-启动Hexo-Server-本地查看\"><a href=\"#9-启动Hexo-Server-本地查看\" class=\"headerlink\" title=\"9. 启动Hexo Server 本地查看\"></a>9. 启动Hexo Server 本地查看</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo s</span><br><span class=\"line\">$ INFO  Start processing</span><br><span class=\"line\">$ INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.</span><br></pre></td></tr></table></figure>\n<h5 id=\"10-发布文章\"><a href=\"#10-发布文章\" class=\"headerlink\" title=\"10. 发布文章\"></a>10. 发布文章</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo clean //清除缓存</span><br><span class=\"line\">$ hexo d</span><br><span class=\"line\">$ INFO  Deploying: git</span><br><span class=\"line\">$ INFO  Clearing .deploy_git folder...</span><br><span class=\"line\">$ INFO  Copying files from public folder...</span><br><span class=\"line\">$ INFO  Deploy <span class=\"keyword\">done</span>: git</span><br></pre></td></tr></table></figure>\n<blockquote>\n<ul>\n<li>发布执行请先hexo clean 清除发布历史数据</li>\n<li>目前发布文章需要手动输入github用户名和密码进行发布</li>\n</ul>\n</blockquote>\n<h5 id=\"11-提交代码，防止其他人搞掉你的文章\"><a href=\"#11-提交代码，防止其他人搞掉你的文章\" class=\"headerlink\" title=\"11. 提交代码，防止其他人搞掉你的文章\"></a>11. 提交代码，防止其他人搞掉你的文章</h5><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ git pull origin master</span><br><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m <span class=\"string\">\"文章书写\"</span></span><br><span class=\"line\">$ git push origin master</span><br></pre></td></tr></table></figure>"},{"title":"localstorage","date":"2016-07-01T02:38:39.000Z","author":"王阳","_content":"## IndexedDB介绍\n>IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。\n\n>IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。**IndexedDB**可以有很多**objectStore**，**objectStore**里可以有很多对象。每个对象可以用key值获取。\n\n## IndexedDB vs LocalStorage\n>**IndexedDB**和**LocalStorage**都是用来在浏览器里存储数据，但它们使用不同的技术，有不同的用途，你需要根据自己的情况适当的选择使用哪种。**LocalStorage**是用key-value键值模式存储数据，但跟**IndexedDB**不一样的是，它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让**LocalStorage**存储对象，你需要借助**JSON.stringify()**能将对象变成字符串形式，再用**JSON.parse()**将字符串还原成对象。但如果要存储大量的复杂的数据，这并不是一种很好的方案。毕竟，**localstorage**就是专门为小数量数据设计的，它的api是**同步**的。\n\n>IndexedDB很适合存储大量数据，它的API是**异步调用**的。**IndexedDB**使用索引存储数据，各种数据库操作放在事务中执行。**IndexedDB**甚至还支持简单的数据类型。**IndexedDB**比**localstorage**强大得多，但它的API也相对复杂。\n\n>对于简单的数据，你应该继续使用**localstorage**，但当你希望存储大量数据时，**IndexedDB**会明显的更适合，**IndexedDB**能提供你更为复杂的查询数据的方式。\n\n## IndexedDB vs Web SQL\n>**WebSQL**也是一种在浏览器里存储数据的技术，跟**IndexedDB**不同的是，**IndexedDB**更像是一个**NoSQL**数据库，而**WebSQL**更像是**关系型数据库**，使用SQL查询数据。W3C已经不再支持这种技术。具体情况请看：[http://www.w3.org/TR/webdatabase/](http://www.w3.org/TR/webdatabase)。\n\n>因为不再支持，所以你就不要在项目中使用这种技术了。\n\n## IndexedDB vs Cookies\n>**Cookies(小甜点)**听起来很好吃，但实际上并不是。每次HTTP接受和发送都会传递Cookies数据，它会占用额外的流量。例如，如果你有一个**10KB**的Cookies数据，发送10次请求，那么，总计就会有100KB的数据在网络上传输。**Cookies**只能是**字符串**。浏览器里存储Cookies的**空间有限**，很多用户禁止浏览器使用Cookies。所以，Cookies只能用来存储**小量的非关键的**数据。\n\n## IndexedDB的用法\n>想要理解IndexedDB，最好的方法是创建一个简单的web应用：把一个班的学生的学号和姓名存储在IndexedDB里。IndexedDB里提供了简单的**增、删、改、查**接口。\n\n\n## 打开一个IndexedDB数据库\n>首先，你需要知道你的浏览器是否支持IndexedDB。请使用最新版的谷歌浏览器或火狐浏览器。低版本的IE是不行的。\n``` javascript\nwindow.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;\nif(!window.indexedDB)\n{\n    console.log(\"你的浏览器不支持IndexedDB\");\n}\n```\n>一旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。\n```javascript\nvar request = window.indexedDB.open(\"testDB\", 2);\n```\n>第一个参数是数据库的名称，第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。\n\n>但你增加数据库版本号时，会触发onupgradeneeded事件，这时可能会出现成功、失败和阻止事件三种情况。\n```javascript\nvar db;\nrequest.onerror = function(event){\n    console.log(\"打开DB失败\", event);\n}\nrequest.onupgradeneeded   = function(event){\n    console.log(\"Upgrading\");\n    db = event.target.result;\n    var objectStore = db.createObjectStore(\"students\", { keyPath : \"rollNo\" });\n};\nrequest.onsuccess  = function(event){\n    console.log(\"成功打开DB\");\n    db = event.target.result;\n}\n```\n>onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接，则会触发onblocked事件。\n\n>在上面的代码片段里，我们创建了一个Object Store，叫做“students”，用“rollNo”做数据键名。\n\n## 往ObjectStore里新增对象\n>为了往数据库里新增数据，我们首先需要创建一个事务，并要求具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行。\n```javascript\nvar transaction = db.transaction([\"students\"],\"readwrite\");\ntransaction.oncomplete = function(event) {\n    console.log(\"Success\");\n};\n\ntransaction.onerror = function(event) {\n    console.log(\"Error\");\n};\nvar objectStore = transaction.objectStore(\"students\");\n\nobjectStore.add({rollNo: rollNo, name: name});\n```\n\n## 从ObjectStore里删除对象\n>删除跟新增一样，需要创建事务，然后调用删除接口，通过key删除对象。\n```javascript\ndb.transaction([\"students\"],\"readwrite\").objectStore(\"students\").delete(rollNo);\n```\n>我把语句合并到了一起，变得更简单，但效果是一样的。\n\n## 通过key取出对象\n>往get()方法里传入对象的key值，取出相应的对象。\n```javascript\nvar request = db.transaction([\"students\"],\"readwrite\").objectStore(\"students\").get(rollNo);\nrequest.onsuccess = function(event){\n    console.log(\"Name : \"+request.result.name);    \n};\n```\n\n## 更新一个对象\n>为了更新一个对象，首先要把它取出来，修改，然后再放回去。\n```javascript\nvar transaction = db.transaction([\"students\"],\"readwrite\");\nvar objectStore = transaction.objectStore(\"students\");\nvar request = objectStore.get(rollNo);\nrequest.onsuccess = function(event){\n    console.log(\"Updating : \"+request.result.name + \" to \" + name);\n    request.result.name = name;\n    objectStore.put(request.result);\n};\n```\n## 完整代码\n> 为大家更加好的了解整体，下面贴出完整代码\n```javascript\n$(function () {\n    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;\n    var request, db;\n\n    if (!window.indexedDB) {\n        console.log(\"Your Browser does not support IndexedDB\");\n    }\n    else {\n        request = window.indexedDB.open(\"testDB\", 2);\n        request.onerror = function (event) {\n            console.log(\"Error opening DB\", event);\n        };\n        request.onupgradeneeded = function (event) {\n            console.log(\"Upgrading\");\n            db = event.target.result;\n            var objectStore = db.createObjectStore(\"students\", {keyPath: \"rollNo\"});\n        };\n        request.onsuccess = function (event) {\n            console.log(\"Success opening DB\");\n            db = event.target.result;\n        };\n    }\n\n    $(\"#addBtn\").click(function () {\n        var name = $(\"#name\").val();\n        var rollNo = $(\"#rollno\").val();\n\n        var transaction = db.transaction([\"students\"], \"readwrite\");\n        transaction.oncomplete = function (event) {\n            console.log(\"Success :)\");\n            $(\"#result\").html(\"Add : Success\");\n        };\n\n        transaction.onerror = function (event) {\n            console.log(\"Error :(\");\n            $(\"#result\").html(\"Add : Error\");\n        };\n        var objectStore = transaction.objectStore(\"students\");\n\n        objectStore.add({rollNo: rollNo, name: name});\n    });\n\n    $(\"#removeBtn\").click(function () {\n        var rollNo = $(\"#rollno\").val();\n        db.transaction([\"students\"], \"readwrite\").objectStore(\"students\").delete(rollNo);\n    });\n    $(\"#getBtn\").click(function () {\n        var rollNo = $(\"#rollno\").val();\n        var request = db.transaction([\"students\"], \"readwrite\").objectStore(\"students\").get(rollNo);\n        request.onsuccess = function (event) {\n            $(\"#result\").html(\"Name : \" + request.result.name);\n        };\n    });\n\n    $(\"#updateBtn\").click(function () {\n        var rollNo = $(\"#rollno\").val();\n        var name = $(\"#name\").val();\n        var transaction = db.transaction([\"students\"], \"readwrite\");\n        var objectStore = transaction.objectStore(\"students\");\n        var request = objectStore.get(rollNo);\n        request.onsuccess = function (event) {\n            $(\"#result\").html(\"Updating : \" + request.result.name + \" to \" + name);\n            request.result.name = name;\n            objectStore.put(request.result);\n        };\n    });\n});\n```\n\n>[PPT演示地址](https://tc-flight-int-web.github.io/localstorage-ppt/);[DEMO演示地址](https://tc-flight-int-web.github.io/localstorage-demo)。如果有任何的问题，请留言。","source":"_posts/Local-Storage.md","raw":"---\ntitle: localstorage\ndate: 2016-07-01 10:38:39\ntags: 技术文档\nauthor: 王阳\n---\n## IndexedDB介绍\n>IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。\n\n>IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。**IndexedDB**可以有很多**objectStore**，**objectStore**里可以有很多对象。每个对象可以用key值获取。\n\n## IndexedDB vs LocalStorage\n>**IndexedDB**和**LocalStorage**都是用来在浏览器里存储数据，但它们使用不同的技术，有不同的用途，你需要根据自己的情况适当的选择使用哪种。**LocalStorage**是用key-value键值模式存储数据，但跟**IndexedDB**不一样的是，它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让**LocalStorage**存储对象，你需要借助**JSON.stringify()**能将对象变成字符串形式，再用**JSON.parse()**将字符串还原成对象。但如果要存储大量的复杂的数据，这并不是一种很好的方案。毕竟，**localstorage**就是专门为小数量数据设计的，它的api是**同步**的。\n\n>IndexedDB很适合存储大量数据，它的API是**异步调用**的。**IndexedDB**使用索引存储数据，各种数据库操作放在事务中执行。**IndexedDB**甚至还支持简单的数据类型。**IndexedDB**比**localstorage**强大得多，但它的API也相对复杂。\n\n>对于简单的数据，你应该继续使用**localstorage**，但当你希望存储大量数据时，**IndexedDB**会明显的更适合，**IndexedDB**能提供你更为复杂的查询数据的方式。\n\n## IndexedDB vs Web SQL\n>**WebSQL**也是一种在浏览器里存储数据的技术，跟**IndexedDB**不同的是，**IndexedDB**更像是一个**NoSQL**数据库，而**WebSQL**更像是**关系型数据库**，使用SQL查询数据。W3C已经不再支持这种技术。具体情况请看：[http://www.w3.org/TR/webdatabase/](http://www.w3.org/TR/webdatabase)。\n\n>因为不再支持，所以你就不要在项目中使用这种技术了。\n\n## IndexedDB vs Cookies\n>**Cookies(小甜点)**听起来很好吃，但实际上并不是。每次HTTP接受和发送都会传递Cookies数据，它会占用额外的流量。例如，如果你有一个**10KB**的Cookies数据，发送10次请求，那么，总计就会有100KB的数据在网络上传输。**Cookies**只能是**字符串**。浏览器里存储Cookies的**空间有限**，很多用户禁止浏览器使用Cookies。所以，Cookies只能用来存储**小量的非关键的**数据。\n\n## IndexedDB的用法\n>想要理解IndexedDB，最好的方法是创建一个简单的web应用：把一个班的学生的学号和姓名存储在IndexedDB里。IndexedDB里提供了简单的**增、删、改、查**接口。\n\n\n## 打开一个IndexedDB数据库\n>首先，你需要知道你的浏览器是否支持IndexedDB。请使用最新版的谷歌浏览器或火狐浏览器。低版本的IE是不行的。\n``` javascript\nwindow.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;\nif(!window.indexedDB)\n{\n    console.log(\"你的浏览器不支持IndexedDB\");\n}\n```\n>一旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。\n```javascript\nvar request = window.indexedDB.open(\"testDB\", 2);\n```\n>第一个参数是数据库的名称，第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。\n\n>但你增加数据库版本号时，会触发onupgradeneeded事件，这时可能会出现成功、失败和阻止事件三种情况。\n```javascript\nvar db;\nrequest.onerror = function(event){\n    console.log(\"打开DB失败\", event);\n}\nrequest.onupgradeneeded   = function(event){\n    console.log(\"Upgrading\");\n    db = event.target.result;\n    var objectStore = db.createObjectStore(\"students\", { keyPath : \"rollNo\" });\n};\nrequest.onsuccess  = function(event){\n    console.log(\"成功打开DB\");\n    db = event.target.result;\n}\n```\n>onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接，则会触发onblocked事件。\n\n>在上面的代码片段里，我们创建了一个Object Store，叫做“students”，用“rollNo”做数据键名。\n\n## 往ObjectStore里新增对象\n>为了往数据库里新增数据，我们首先需要创建一个事务，并要求具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行。\n```javascript\nvar transaction = db.transaction([\"students\"],\"readwrite\");\ntransaction.oncomplete = function(event) {\n    console.log(\"Success\");\n};\n\ntransaction.onerror = function(event) {\n    console.log(\"Error\");\n};\nvar objectStore = transaction.objectStore(\"students\");\n\nobjectStore.add({rollNo: rollNo, name: name});\n```\n\n## 从ObjectStore里删除对象\n>删除跟新增一样，需要创建事务，然后调用删除接口，通过key删除对象。\n```javascript\ndb.transaction([\"students\"],\"readwrite\").objectStore(\"students\").delete(rollNo);\n```\n>我把语句合并到了一起，变得更简单，但效果是一样的。\n\n## 通过key取出对象\n>往get()方法里传入对象的key值，取出相应的对象。\n```javascript\nvar request = db.transaction([\"students\"],\"readwrite\").objectStore(\"students\").get(rollNo);\nrequest.onsuccess = function(event){\n    console.log(\"Name : \"+request.result.name);    \n};\n```\n\n## 更新一个对象\n>为了更新一个对象，首先要把它取出来，修改，然后再放回去。\n```javascript\nvar transaction = db.transaction([\"students\"],\"readwrite\");\nvar objectStore = transaction.objectStore(\"students\");\nvar request = objectStore.get(rollNo);\nrequest.onsuccess = function(event){\n    console.log(\"Updating : \"+request.result.name + \" to \" + name);\n    request.result.name = name;\n    objectStore.put(request.result);\n};\n```\n## 完整代码\n> 为大家更加好的了解整体，下面贴出完整代码\n```javascript\n$(function () {\n    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;\n    var request, db;\n\n    if (!window.indexedDB) {\n        console.log(\"Your Browser does not support IndexedDB\");\n    }\n    else {\n        request = window.indexedDB.open(\"testDB\", 2);\n        request.onerror = function (event) {\n            console.log(\"Error opening DB\", event);\n        };\n        request.onupgradeneeded = function (event) {\n            console.log(\"Upgrading\");\n            db = event.target.result;\n            var objectStore = db.createObjectStore(\"students\", {keyPath: \"rollNo\"});\n        };\n        request.onsuccess = function (event) {\n            console.log(\"Success opening DB\");\n            db = event.target.result;\n        };\n    }\n\n    $(\"#addBtn\").click(function () {\n        var name = $(\"#name\").val();\n        var rollNo = $(\"#rollno\").val();\n\n        var transaction = db.transaction([\"students\"], \"readwrite\");\n        transaction.oncomplete = function (event) {\n            console.log(\"Success :)\");\n            $(\"#result\").html(\"Add : Success\");\n        };\n\n        transaction.onerror = function (event) {\n            console.log(\"Error :(\");\n            $(\"#result\").html(\"Add : Error\");\n        };\n        var objectStore = transaction.objectStore(\"students\");\n\n        objectStore.add({rollNo: rollNo, name: name});\n    });\n\n    $(\"#removeBtn\").click(function () {\n        var rollNo = $(\"#rollno\").val();\n        db.transaction([\"students\"], \"readwrite\").objectStore(\"students\").delete(rollNo);\n    });\n    $(\"#getBtn\").click(function () {\n        var rollNo = $(\"#rollno\").val();\n        var request = db.transaction([\"students\"], \"readwrite\").objectStore(\"students\").get(rollNo);\n        request.onsuccess = function (event) {\n            $(\"#result\").html(\"Name : \" + request.result.name);\n        };\n    });\n\n    $(\"#updateBtn\").click(function () {\n        var rollNo = $(\"#rollno\").val();\n        var name = $(\"#name\").val();\n        var transaction = db.transaction([\"students\"], \"readwrite\");\n        var objectStore = transaction.objectStore(\"students\");\n        var request = objectStore.get(rollNo);\n        request.onsuccess = function (event) {\n            $(\"#result\").html(\"Updating : \" + request.result.name + \" to \" + name);\n            request.result.name = name;\n            objectStore.put(request.result);\n        };\n    });\n});\n```\n\n>[PPT演示地址](https://tc-flight-int-web.github.io/localstorage-ppt/);[DEMO演示地址](https://tc-flight-int-web.github.io/localstorage-demo)。如果有任何的问题，请留言。","slug":"Local-Storage","published":1,"updated":"2016-07-01T08:45:15.447Z","comments":1,"layout":"post","photos":[],"link":"","_id":"ciq3hvsrl000108d7c3xee57y","content":"<h2 id=\"IndexedDB介绍\"><a href=\"#IndexedDB介绍\" class=\"headerlink\" title=\"IndexedDB介绍\"></a>IndexedDB介绍</h2><blockquote>\n<p>IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。</p>\n<p>IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。<strong>IndexedDB</strong>可以有很多<strong>objectStore</strong>，<strong>objectStore</strong>里可以有很多对象。每个对象可以用key值获取。</p>\n</blockquote>\n<h2 id=\"IndexedDB-vs-LocalStorage\"><a href=\"#IndexedDB-vs-LocalStorage\" class=\"headerlink\" title=\"IndexedDB vs LocalStorage\"></a>IndexedDB vs LocalStorage</h2><blockquote>\n<p><strong>IndexedDB</strong>和<strong>LocalStorage</strong>都是用来在浏览器里存储数据，但它们使用不同的技术，有不同的用途，你需要根据自己的情况适当的选择使用哪种。<strong>LocalStorage</strong>是用key-value键值模式存储数据，但跟<strong>IndexedDB</strong>不一样的是，它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让<strong>LocalStorage</strong>存储对象，你需要借助<strong>JSON.stringify()</strong>能将对象变成字符串形式，再用<strong>JSON.parse()</strong>将字符串还原成对象。但如果要存储大量的复杂的数据，这并不是一种很好的方案。毕竟，<strong>localstorage</strong>就是专门为小数量数据设计的，它的api是<strong>同步</strong>的。</p>\n<p>IndexedDB很适合存储大量数据，它的API是<strong>异步调用</strong>的。<strong>IndexedDB</strong>使用索引存储数据，各种数据库操作放在事务中执行。<strong>IndexedDB</strong>甚至还支持简单的数据类型。<strong>IndexedDB</strong>比<strong>localstorage</strong>强大得多，但它的API也相对复杂。</p>\n<p>对于简单的数据，你应该继续使用<strong>localstorage</strong>，但当你希望存储大量数据时，<strong>IndexedDB</strong>会明显的更适合，<strong>IndexedDB</strong>能提供你更为复杂的查询数据的方式。</p>\n</blockquote>\n<h2 id=\"IndexedDB-vs-Web-SQL\"><a href=\"#IndexedDB-vs-Web-SQL\" class=\"headerlink\" title=\"IndexedDB vs Web SQL\"></a>IndexedDB vs Web SQL</h2><blockquote>\n<p><strong>WebSQL</strong>也是一种在浏览器里存储数据的技术，跟<strong>IndexedDB</strong>不同的是，<strong>IndexedDB</strong>更像是一个<strong>NoSQL</strong>数据库，而<strong>WebSQL</strong>更像是<strong>关系型数据库</strong>，使用SQL查询数据。W3C已经不再支持这种技术。具体情况请看：<a href=\"http://www.w3.org/TR/webdatabase\" target=\"_blank\" rel=\"external\">http://www.w3.org/TR/webdatabase/</a>。</p>\n<p>因为不再支持，所以你就不要在项目中使用这种技术了。</p>\n</blockquote>\n<h2 id=\"IndexedDB-vs-Cookies\"><a href=\"#IndexedDB-vs-Cookies\" class=\"headerlink\" title=\"IndexedDB vs Cookies\"></a>IndexedDB vs Cookies</h2><blockquote>\n<p><strong>Cookies(小甜点)</strong>听起来很好吃，但实际上并不是。每次HTTP接受和发送都会传递Cookies数据，它会占用额外的流量。例如，如果你有一个<strong>10KB</strong>的Cookies数据，发送10次请求，那么，总计就会有100KB的数据在网络上传输。<strong>Cookies</strong>只能是<strong>字符串</strong>。浏览器里存储Cookies的<strong>空间有限</strong>，很多用户禁止浏览器使用Cookies。所以，Cookies只能用来存储<strong>小量的非关键的</strong>数据。</p>\n</blockquote>\n<h2 id=\"IndexedDB的用法\"><a href=\"#IndexedDB的用法\" class=\"headerlink\" title=\"IndexedDB的用法\"></a>IndexedDB的用法</h2><blockquote>\n<p>想要理解IndexedDB，最好的方法是创建一个简单的web应用：把一个班的学生的学号和姓名存储在IndexedDB里。IndexedDB里提供了简单的<strong>增、删、改、查</strong>接口。</p>\n</blockquote>\n<h2 id=\"打开一个IndexedDB数据库\"><a href=\"#打开一个IndexedDB数据库\" class=\"headerlink\" title=\"打开一个IndexedDB数据库\"></a>打开一个IndexedDB数据库</h2><blockquote>\n<p>首先，你需要知道你的浏览器是否支持IndexedDB。请使用最新版的谷歌浏览器或火狐浏览器。低版本的IE是不行的。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">window</span>.indexedDB = <span class=\"built_in\">window</span>.indexedDB || <span class=\"built_in\">window</span>.mozIndexedDB || <span class=\"built_in\">window</span>.webkitIndexedDB || <span class=\"built_in\">window</span>.msIndexedDB;</span><br><span class=\"line\"><span class=\"keyword\">if</span>(!<span class=\"built_in\">window</span>.indexedDB)</span><br><span class=\"line\">&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"你的浏览器不支持IndexedDB\"</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure></p>\n<p>一旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> request = <span class=\"built_in\">window</span>.indexedDB.open(<span class=\"string\">\"testDB\"</span>, <span class=\"number\">2</span>);</span><br></pre></td></tr></table></figure></p>\n<p>第一个参数是数据库的名称，第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。</p>\n<p>但你增加数据库版本号时，会触发onupgradeneeded事件，这时可能会出现成功、失败和阻止事件三种情况。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> db;</span><br><span class=\"line\">request.onerror = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"打开DB失败\"</span>, event);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">request.onupgradeneeded   = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Upgrading\"</span>);</span><br><span class=\"line\">    db = event.target.result;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> objectStore = db.createObjectStore(<span class=\"string\">\"students\"</span>, &#123; keyPath : <span class=\"string\">\"rollNo\"</span> &#125;);</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\">request.onsuccess  = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"成功打开DB\"</span>);</span><br><span class=\"line\">    db = event.target.result;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure></p>\n<p>onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接，则会触发onblocked事件。</p>\n<p>在上面的代码片段里，我们创建了一个Object Store，叫做“students”，用“rollNo”做数据键名。</p>\n</blockquote>\n<h2 id=\"往ObjectStore里新增对象\"><a href=\"#往ObjectStore里新增对象\" class=\"headerlink\" title=\"往ObjectStore里新增对象\"></a>往ObjectStore里新增对象</h2><blockquote>\n<p>为了往数据库里新增数据，我们首先需要创建一个事务，并要求具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> transaction = db.transaction([<span class=\"string\">\"students\"</span>],<span class=\"string\">\"readwrite\"</span>);</span><br><span class=\"line\">transaction.oncomplete = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Success\"</span>);</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\">transaction.onerror = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error\"</span>);</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">var</span> objectStore = transaction.objectStore(<span class=\"string\">\"students\"</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">objectStore.add(&#123;rollNo: rollNo, name: name&#125;);</span><br></pre></td></tr></table></figure></p>\n</blockquote>\n<h2 id=\"从ObjectStore里删除对象\"><a href=\"#从ObjectStore里删除对象\" class=\"headerlink\" title=\"从ObjectStore里删除对象\"></a>从ObjectStore里删除对象</h2><blockquote>\n<p>删除跟新增一样，需要创建事务，然后调用删除接口，通过key删除对象。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">db.transaction([<span class=\"string\">\"students\"</span>],<span class=\"string\">\"readwrite\"</span>).objectStore(<span class=\"string\">\"students\"</span>).delete(rollNo);</span><br></pre></td></tr></table></figure></p>\n<p>我把语句合并到了一起，变得更简单，但效果是一样的。</p>\n</blockquote>\n<h2 id=\"通过key取出对象\"><a href=\"#通过key取出对象\" class=\"headerlink\" title=\"通过key取出对象\"></a>通过key取出对象</h2><blockquote>\n<p>往get()方法里传入对象的key值，取出相应的对象。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> request = db.transaction([<span class=\"string\">\"students\"</span>],<span class=\"string\">\"readwrite\"</span>).objectStore(<span class=\"string\">\"students\"</span>).get(rollNo);</span><br><span class=\"line\">request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Name : \"</span>+request.result.name);    </span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure></p>\n</blockquote>\n<h2 id=\"更新一个对象\"><a href=\"#更新一个对象\" class=\"headerlink\" title=\"更新一个对象\"></a>更新一个对象</h2><blockquote>\n<p>为了更新一个对象，首先要把它取出来，修改，然后再放回去。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> transaction = db.transaction([<span class=\"string\">\"students\"</span>],<span class=\"string\">\"readwrite\"</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> objectStore = transaction.objectStore(<span class=\"string\">\"students\"</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> request = objectStore.get(rollNo);</span><br><span class=\"line\">request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Updating : \"</span>+request.result.name + <span class=\"string\">\" to \"</span> + name);</span><br><span class=\"line\">    request.result.name = name;</span><br><span class=\"line\">    objectStore.put(request.result);</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure></p>\n</blockquote>\n<h2 id=\"完整代码\"><a href=\"#完整代码\" class=\"headerlink\" title=\"完整代码\"></a>完整代码</h2><blockquote>\n<p>为大家更加好的了解整体，下面贴出完整代码<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br><span class=\"line\">28</span><br><span class=\"line\">29</span><br><span class=\"line\">30</span><br><span class=\"line\">31</span><br><span class=\"line\">32</span><br><span class=\"line\">33</span><br><span class=\"line\">34</span><br><span class=\"line\">35</span><br><span class=\"line\">36</span><br><span class=\"line\">37</span><br><span class=\"line\">38</span><br><span class=\"line\">39</span><br><span class=\"line\">40</span><br><span class=\"line\">41</span><br><span class=\"line\">42</span><br><span class=\"line\">43</span><br><span class=\"line\">44</span><br><span class=\"line\">45</span><br><span class=\"line\">46</span><br><span class=\"line\">47</span><br><span class=\"line\">48</span><br><span class=\"line\">49</span><br><span class=\"line\">50</span><br><span class=\"line\">51</span><br><span class=\"line\">52</span><br><span class=\"line\">53</span><br><span class=\"line\">54</span><br><span class=\"line\">55</span><br><span class=\"line\">56</span><br><span class=\"line\">57</span><br><span class=\"line\">58</span><br><span class=\"line\">59</span><br><span class=\"line\">60</span><br><span class=\"line\">61</span><br><span class=\"line\">62</span><br><span class=\"line\">63</span><br><span class=\"line\">64</span><br><span class=\"line\">65</span><br><span class=\"line\">66</span><br><span class=\"line\">67</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">window</span>.indexedDB = <span class=\"built_in\">window</span>.indexedDB || <span class=\"built_in\">window</span>.mozIndexedDB || <span class=\"built_in\">window</span>.webkitIndexedDB || <span class=\"built_in\">window</span>.msIndexedDB;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> request, db;</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!<span class=\"built_in\">window</span>.indexedDB) &#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Your Browser does not support IndexedDB\"</span>);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        request = <span class=\"built_in\">window</span>.indexedDB.open(<span class=\"string\">\"testDB\"</span>, <span class=\"number\">2</span>);</span><br><span class=\"line\">        request.onerror = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error opening DB\"</span>, event);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">        request.onupgradeneeded = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Upgrading\"</span>);</span><br><span class=\"line\">            db = event.target.result;</span><br><span class=\"line\">            <span class=\"keyword\">var</span> objectStore = db.createObjectStore(<span class=\"string\">\"students\"</span>, &#123;keyPath: <span class=\"string\">\"rollNo\"</span>&#125;);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">        request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Success opening DB\"</span>);</span><br><span class=\"line\">            db = event.target.result;</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    $(<span class=\"string\">\"#addBtn\"</span>).click(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> name = $(<span class=\"string\">\"#name\"</span>).val();</span><br><span class=\"line\">        <span class=\"keyword\">var</span> rollNo = $(<span class=\"string\">\"#rollno\"</span>).val();</span><br><span class=\"line\"></span><br><span class=\"line\">        <span class=\"keyword\">var</span> transaction = db.transaction([<span class=\"string\">\"students\"</span>], <span class=\"string\">\"readwrite\"</span>);</span><br><span class=\"line\">        transaction.oncomplete = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Success :)\"</span>);</span><br><span class=\"line\">            $(<span class=\"string\">\"#result\"</span>).html(<span class=\"string\">\"Add : Success\"</span>);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\"></span><br><span class=\"line\">        transaction.onerror = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error :(\"</span>);</span><br><span class=\"line\">            $(<span class=\"string\">\"#result\"</span>).html(<span class=\"string\">\"Add : Error\"</span>);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> objectStore = transaction.objectStore(<span class=\"string\">\"students\"</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">        objectStore.add(&#123;rollNo: rollNo, name: name&#125;);</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    $(<span class=\"string\">\"#removeBtn\"</span>).click(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> rollNo = $(<span class=\"string\">\"#rollno\"</span>).val();</span><br><span class=\"line\">        db.transaction([<span class=\"string\">\"students\"</span>], <span class=\"string\">\"readwrite\"</span>).objectStore(<span class=\"string\">\"students\"</span>).delete(rollNo);</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">    $(<span class=\"string\">\"#getBtn\"</span>).click(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> rollNo = $(<span class=\"string\">\"#rollno\"</span>).val();</span><br><span class=\"line\">        <span class=\"keyword\">var</span> request = db.transaction([<span class=\"string\">\"students\"</span>], <span class=\"string\">\"readwrite\"</span>).objectStore(<span class=\"string\">\"students\"</span>).get(rollNo);</span><br><span class=\"line\">        request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            $(<span class=\"string\">\"#result\"</span>).html(<span class=\"string\">\"Name : \"</span> + request.result.name);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    $(<span class=\"string\">\"#updateBtn\"</span>).click(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> rollNo = $(<span class=\"string\">\"#rollno\"</span>).val();</span><br><span class=\"line\">        <span class=\"keyword\">var</span> name = $(<span class=\"string\">\"#name\"</span>).val();</span><br><span class=\"line\">        <span class=\"keyword\">var</span> transaction = db.transaction([<span class=\"string\">\"students\"</span>], <span class=\"string\">\"readwrite\"</span>);</span><br><span class=\"line\">        <span class=\"keyword\">var</span> objectStore = transaction.objectStore(<span class=\"string\">\"students\"</span>);</span><br><span class=\"line\">        <span class=\"keyword\">var</span> request = objectStore.get(rollNo);</span><br><span class=\"line\">        request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            $(<span class=\"string\">\"#result\"</span>).html(<span class=\"string\">\"Updating : \"</span> + request.result.name + <span class=\"string\">\" to \"</span> + name);</span><br><span class=\"line\">            request.result.name = name;</span><br><span class=\"line\">            objectStore.put(request.result);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure></p>\n<p><a href=\"https://tc-flight-int-web.github.io/localstorage-ppt/\">PPT演示地址</a>;<a href=\"https://tc-flight-int-web.github.io/localstorage-demo\">DEMO演示地址</a>。如果有任何的问题，请留言。</p>\n</blockquote>\n","excerpt":"","more":"<h2 id=\"IndexedDB介绍\"><a href=\"#IndexedDB介绍\" class=\"headerlink\" title=\"IndexedDB介绍\"></a>IndexedDB介绍</h2><blockquote>\n<p>IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。</p>\n<p>IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。<strong>IndexedDB</strong>可以有很多<strong>objectStore</strong>，<strong>objectStore</strong>里可以有很多对象。每个对象可以用key值获取。</p>\n</blockquote>\n<h2 id=\"IndexedDB-vs-LocalStorage\"><a href=\"#IndexedDB-vs-LocalStorage\" class=\"headerlink\" title=\"IndexedDB vs LocalStorage\"></a>IndexedDB vs LocalStorage</h2><blockquote>\n<p><strong>IndexedDB</strong>和<strong>LocalStorage</strong>都是用来在浏览器里存储数据，但它们使用不同的技术，有不同的用途，你需要根据自己的情况适当的选择使用哪种。<strong>LocalStorage</strong>是用key-value键值模式存储数据，但跟<strong>IndexedDB</strong>不一样的是，它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让<strong>LocalStorage</strong>存储对象，你需要借助<strong>JSON.stringify()</strong>能将对象变成字符串形式，再用<strong>JSON.parse()</strong>将字符串还原成对象。但如果要存储大量的复杂的数据，这并不是一种很好的方案。毕竟，<strong>localstorage</strong>就是专门为小数量数据设计的，它的api是<strong>同步</strong>的。</p>\n<p>IndexedDB很适合存储大量数据，它的API是<strong>异步调用</strong>的。<strong>IndexedDB</strong>使用索引存储数据，各种数据库操作放在事务中执行。<strong>IndexedDB</strong>甚至还支持简单的数据类型。<strong>IndexedDB</strong>比<strong>localstorage</strong>强大得多，但它的API也相对复杂。</p>\n<p>对于简单的数据，你应该继续使用<strong>localstorage</strong>，但当你希望存储大量数据时，<strong>IndexedDB</strong>会明显的更适合，<strong>IndexedDB</strong>能提供你更为复杂的查询数据的方式。</p>\n</blockquote>\n<h2 id=\"IndexedDB-vs-Web-SQL\"><a href=\"#IndexedDB-vs-Web-SQL\" class=\"headerlink\" title=\"IndexedDB vs Web SQL\"></a>IndexedDB vs Web SQL</h2><blockquote>\n<p><strong>WebSQL</strong>也是一种在浏览器里存储数据的技术，跟<strong>IndexedDB</strong>不同的是，<strong>IndexedDB</strong>更像是一个<strong>NoSQL</strong>数据库，而<strong>WebSQL</strong>更像是<strong>关系型数据库</strong>，使用SQL查询数据。W3C已经不再支持这种技术。具体情况请看：<a href=\"http://www.w3.org/TR/webdatabase\">http://www.w3.org/TR/webdatabase/</a>。</p>\n<p>因为不再支持，所以你就不要在项目中使用这种技术了。</p>\n</blockquote>\n<h2 id=\"IndexedDB-vs-Cookies\"><a href=\"#IndexedDB-vs-Cookies\" class=\"headerlink\" title=\"IndexedDB vs Cookies\"></a>IndexedDB vs Cookies</h2><blockquote>\n<p><strong>Cookies(小甜点)</strong>听起来很好吃，但实际上并不是。每次HTTP接受和发送都会传递Cookies数据，它会占用额外的流量。例如，如果你有一个<strong>10KB</strong>的Cookies数据，发送10次请求，那么，总计就会有100KB的数据在网络上传输。<strong>Cookies</strong>只能是<strong>字符串</strong>。浏览器里存储Cookies的<strong>空间有限</strong>，很多用户禁止浏览器使用Cookies。所以，Cookies只能用来存储<strong>小量的非关键的</strong>数据。</p>\n</blockquote>\n<h2 id=\"IndexedDB的用法\"><a href=\"#IndexedDB的用法\" class=\"headerlink\" title=\"IndexedDB的用法\"></a>IndexedDB的用法</h2><blockquote>\n<p>想要理解IndexedDB，最好的方法是创建一个简单的web应用：把一个班的学生的学号和姓名存储在IndexedDB里。IndexedDB里提供了简单的<strong>增、删、改、查</strong>接口。</p>\n</blockquote>\n<h2 id=\"打开一个IndexedDB数据库\"><a href=\"#打开一个IndexedDB数据库\" class=\"headerlink\" title=\"打开一个IndexedDB数据库\"></a>打开一个IndexedDB数据库</h2><blockquote>\n<p>首先，你需要知道你的浏览器是否支持IndexedDB。请使用最新版的谷歌浏览器或火狐浏览器。低版本的IE是不行的。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">window</span>.indexedDB = <span class=\"built_in\">window</span>.indexedDB || <span class=\"built_in\">window</span>.mozIndexedDB || <span class=\"built_in\">window</span>.webkitIndexedDB || <span class=\"built_in\">window</span>.msIndexedDB;</span><br><span class=\"line\"><span class=\"keyword\">if</span>(!<span class=\"built_in\">window</span>.indexedDB)</span><br><span class=\"line\">&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"你的浏览器不支持IndexedDB\"</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure></p>\n<p>一旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> request = <span class=\"built_in\">window</span>.indexedDB.open(<span class=\"string\">\"testDB\"</span>, <span class=\"number\">2</span>);</span><br></pre></td></tr></table></figure></p>\n<p>第一个参数是数据库的名称，第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。</p>\n<p>但你增加数据库版本号时，会触发onupgradeneeded事件，这时可能会出现成功、失败和阻止事件三种情况。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> db;</span><br><span class=\"line\">request.onerror = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"打开DB失败\"</span>, event);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">request.onupgradeneeded   = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Upgrading\"</span>);</span><br><span class=\"line\">    db = event.target.result;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> objectStore = db.createObjectStore(<span class=\"string\">\"students\"</span>, &#123; keyPath : <span class=\"string\">\"rollNo\"</span> &#125;);</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\">request.onsuccess  = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"成功打开DB\"</span>);</span><br><span class=\"line\">    db = event.target.result;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure></p>\n<p>onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接，则会触发onblocked事件。</p>\n<p>在上面的代码片段里，我们创建了一个Object Store，叫做“students”，用“rollNo”做数据键名。</p>\n</blockquote>\n<h2 id=\"往ObjectStore里新增对象\"><a href=\"#往ObjectStore里新增对象\" class=\"headerlink\" title=\"往ObjectStore里新增对象\"></a>往ObjectStore里新增对象</h2><blockquote>\n<p>为了往数据库里新增数据，我们首先需要创建一个事务，并要求具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> transaction = db.transaction([<span class=\"string\">\"students\"</span>],<span class=\"string\">\"readwrite\"</span>);</span><br><span class=\"line\">transaction.oncomplete = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Success\"</span>);</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\">transaction.onerror = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error\"</span>);</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">var</span> objectStore = transaction.objectStore(<span class=\"string\">\"students\"</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">objectStore.add(&#123;rollNo: rollNo, name: name&#125;);</span><br></pre></td></tr></table></figure></p>\n</blockquote>\n<h2 id=\"从ObjectStore里删除对象\"><a href=\"#从ObjectStore里删除对象\" class=\"headerlink\" title=\"从ObjectStore里删除对象\"></a>从ObjectStore里删除对象</h2><blockquote>\n<p>删除跟新增一样，需要创建事务，然后调用删除接口，通过key删除对象。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">db.transaction([<span class=\"string\">\"students\"</span>],<span class=\"string\">\"readwrite\"</span>).objectStore(<span class=\"string\">\"students\"</span>).delete(rollNo);</span><br></pre></td></tr></table></figure></p>\n<p>我把语句合并到了一起，变得更简单，但效果是一样的。</p>\n</blockquote>\n<h2 id=\"通过key取出对象\"><a href=\"#通过key取出对象\" class=\"headerlink\" title=\"通过key取出对象\"></a>通过key取出对象</h2><blockquote>\n<p>往get()方法里传入对象的key值，取出相应的对象。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> request = db.transaction([<span class=\"string\">\"students\"</span>],<span class=\"string\">\"readwrite\"</span>).objectStore(<span class=\"string\">\"students\"</span>).get(rollNo);</span><br><span class=\"line\">request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Name : \"</span>+request.result.name);    </span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure></p>\n</blockquote>\n<h2 id=\"更新一个对象\"><a href=\"#更新一个对象\" class=\"headerlink\" title=\"更新一个对象\"></a>更新一个对象</h2><blockquote>\n<p>为了更新一个对象，首先要把它取出来，修改，然后再放回去。<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> transaction = db.transaction([<span class=\"string\">\"students\"</span>],<span class=\"string\">\"readwrite\"</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> objectStore = transaction.objectStore(<span class=\"string\">\"students\"</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> request = objectStore.get(rollNo);</span><br><span class=\"line\">request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">event</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Updating : \"</span>+request.result.name + <span class=\"string\">\" to \"</span> + name);</span><br><span class=\"line\">    request.result.name = name;</span><br><span class=\"line\">    objectStore.put(request.result);</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure></p>\n</blockquote>\n<h2 id=\"完整代码\"><a href=\"#完整代码\" class=\"headerlink\" title=\"完整代码\"></a>完整代码</h2><blockquote>\n<p>为大家更加好的了解整体，下面贴出完整代码<br><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br><span class=\"line\">28</span><br><span class=\"line\">29</span><br><span class=\"line\">30</span><br><span class=\"line\">31</span><br><span class=\"line\">32</span><br><span class=\"line\">33</span><br><span class=\"line\">34</span><br><span class=\"line\">35</span><br><span class=\"line\">36</span><br><span class=\"line\">37</span><br><span class=\"line\">38</span><br><span class=\"line\">39</span><br><span class=\"line\">40</span><br><span class=\"line\">41</span><br><span class=\"line\">42</span><br><span class=\"line\">43</span><br><span class=\"line\">44</span><br><span class=\"line\">45</span><br><span class=\"line\">46</span><br><span class=\"line\">47</span><br><span class=\"line\">48</span><br><span class=\"line\">49</span><br><span class=\"line\">50</span><br><span class=\"line\">51</span><br><span class=\"line\">52</span><br><span class=\"line\">53</span><br><span class=\"line\">54</span><br><span class=\"line\">55</span><br><span class=\"line\">56</span><br><span class=\"line\">57</span><br><span class=\"line\">58</span><br><span class=\"line\">59</span><br><span class=\"line\">60</span><br><span class=\"line\">61</span><br><span class=\"line\">62</span><br><span class=\"line\">63</span><br><span class=\"line\">64</span><br><span class=\"line\">65</span><br><span class=\"line\">66</span><br><span class=\"line\">67</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">window</span>.indexedDB = <span class=\"built_in\">window</span>.indexedDB || <span class=\"built_in\">window</span>.mozIndexedDB || <span class=\"built_in\">window</span>.webkitIndexedDB || <span class=\"built_in\">window</span>.msIndexedDB;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> request, db;</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!<span class=\"built_in\">window</span>.indexedDB) &#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Your Browser does not support IndexedDB\"</span>);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        request = <span class=\"built_in\">window</span>.indexedDB.open(<span class=\"string\">\"testDB\"</span>, <span class=\"number\">2</span>);</span><br><span class=\"line\">        request.onerror = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error opening DB\"</span>, event);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">        request.onupgradeneeded = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Upgrading\"</span>);</span><br><span class=\"line\">            db = event.target.result;</span><br><span class=\"line\">            <span class=\"keyword\">var</span> objectStore = db.createObjectStore(<span class=\"string\">\"students\"</span>, &#123;keyPath: <span class=\"string\">\"rollNo\"</span>&#125;);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">        request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Success opening DB\"</span>);</span><br><span class=\"line\">            db = event.target.result;</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    $(<span class=\"string\">\"#addBtn\"</span>).click(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> name = $(<span class=\"string\">\"#name\"</span>).val();</span><br><span class=\"line\">        <span class=\"keyword\">var</span> rollNo = $(<span class=\"string\">\"#rollno\"</span>).val();</span><br><span class=\"line\"></span><br><span class=\"line\">        <span class=\"keyword\">var</span> transaction = db.transaction([<span class=\"string\">\"students\"</span>], <span class=\"string\">\"readwrite\"</span>);</span><br><span class=\"line\">        transaction.oncomplete = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Success :)\"</span>);</span><br><span class=\"line\">            $(<span class=\"string\">\"#result\"</span>).html(<span class=\"string\">\"Add : Success\"</span>);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\"></span><br><span class=\"line\">        transaction.onerror = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error :(\"</span>);</span><br><span class=\"line\">            $(<span class=\"string\">\"#result\"</span>).html(<span class=\"string\">\"Add : Error\"</span>);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> objectStore = transaction.objectStore(<span class=\"string\">\"students\"</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">        objectStore.add(&#123;rollNo: rollNo, name: name&#125;);</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    $(<span class=\"string\">\"#removeBtn\"</span>).click(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> rollNo = $(<span class=\"string\">\"#rollno\"</span>).val();</span><br><span class=\"line\">        db.transaction([<span class=\"string\">\"students\"</span>], <span class=\"string\">\"readwrite\"</span>).objectStore(<span class=\"string\">\"students\"</span>).delete(rollNo);</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">    $(<span class=\"string\">\"#getBtn\"</span>).click(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> rollNo = $(<span class=\"string\">\"#rollno\"</span>).val();</span><br><span class=\"line\">        <span class=\"keyword\">var</span> request = db.transaction([<span class=\"string\">\"students\"</span>], <span class=\"string\">\"readwrite\"</span>).objectStore(<span class=\"string\">\"students\"</span>).get(rollNo);</span><br><span class=\"line\">        request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            $(<span class=\"string\">\"#result\"</span>).html(<span class=\"string\">\"Name : \"</span> + request.result.name);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    $(<span class=\"string\">\"#updateBtn\"</span>).click(<span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">        <span class=\"keyword\">var</span> rollNo = $(<span class=\"string\">\"#rollno\"</span>).val();</span><br><span class=\"line\">        <span class=\"keyword\">var</span> name = $(<span class=\"string\">\"#name\"</span>).val();</span><br><span class=\"line\">        <span class=\"keyword\">var</span> transaction = db.transaction([<span class=\"string\">\"students\"</span>], <span class=\"string\">\"readwrite\"</span>);</span><br><span class=\"line\">        <span class=\"keyword\">var</span> objectStore = transaction.objectStore(<span class=\"string\">\"students\"</span>);</span><br><span class=\"line\">        <span class=\"keyword\">var</span> request = objectStore.get(rollNo);</span><br><span class=\"line\">        request.onsuccess = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\">event</span>) </span>&#123;</span><br><span class=\"line\">            $(<span class=\"string\">\"#result\"</span>).html(<span class=\"string\">\"Updating : \"</span> + request.result.name + <span class=\"string\">\" to \"</span> + name);</span><br><span class=\"line\">            request.result.name = name;</span><br><span class=\"line\">            objectStore.put(request.result);</span><br><span class=\"line\">        &#125;;</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure></p>\n<p><a href=\"https://tc-flight-int-web.github.io/localstorage-ppt/\">PPT演示地址</a>;<a href=\"https://tc-flight-int-web.github.io/localstorage-demo\">DEMO演示地址</a>。如果有任何的问题，请留言。</p>\n</blockquote>\n"},{"title":"webpack从入门到精通（一）","date":"2016-06-17T10:23:44.000Z","author":"徐伟","_content":"## 什么是webpack\n事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包\n\n## webpack安装步骤\n1. 首先得有Node.js\n2. 其次全局安装webpack\n\n\t\tnpm install -g webpack\n\n3. 在项目目录中安装webpack和插件\n\n\t\tnpm install —save-dev webpack\n\n4. 配置webpack\n\n## webpack配置\n\n默认使用webpack.config.js\n\n\tvar path = require('path');\n\tmodule.exports = {\n\t    entry:'./jsx/app.jsx',\n\t    output:{\n\t        path: path.join(__dirname , \"/build\"),\n\t        filename:'app.js'\n\t    },\n\t    module:{\n\t        loaders:[\n\t            {\n\t                test:/\\.(js|jsx)$/,\n\t                loaders:['babel'],\n\t                exclude:[path.join(__dirname , \"/build\")]\n\t            }\n\t        ]\n\t    }\n\t};\n\n\n其中*entry*是入口文件，*output*是编译后输出文件，*module*中*loaders*是解析操作\n\n##未完待续","source":"_posts/webpack从入门到精通（一）.md","raw":"---\ntitle: webpack从入门到精通（一）\ndate: 2016-06-17 18:23:44\ntags: 分享日志\nauthor: 徐伟\n---\n## 什么是webpack\n事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包\n\n## webpack安装步骤\n1. 首先得有Node.js\n2. 其次全局安装webpack\n\n\t\tnpm install -g webpack\n\n3. 在项目目录中安装webpack和插件\n\n\t\tnpm install —save-dev webpack\n\n4. 配置webpack\n\n## webpack配置\n\n默认使用webpack.config.js\n\n\tvar path = require('path');\n\tmodule.exports = {\n\t    entry:'./jsx/app.jsx',\n\t    output:{\n\t        path: path.join(__dirname , \"/build\"),\n\t        filename:'app.js'\n\t    },\n\t    module:{\n\t        loaders:[\n\t            {\n\t                test:/\\.(js|jsx)$/,\n\t                loaders:['babel'],\n\t                exclude:[path.join(__dirname , \"/build\")]\n\t            }\n\t        ]\n\t    }\n\t};\n\n\n其中*entry*是入口文件，*output*是编译后输出文件，*module*中*loaders*是解析操作\n\n##未完待续","slug":"webpack从入门到精通（一）","published":1,"updated":"2016-06-23T02:26:57.782Z","comments":1,"layout":"post","photos":[],"link":"","_id":"ciq3hvsrq000308d7lgmyt5qu","content":"<h2 id=\"什么是webpack\"><a href=\"#什么是webpack\" class=\"headerlink\" title=\"什么是webpack\"></a>什么是webpack</h2><p>事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包</p>\n<h2 id=\"webpack安装步骤\"><a href=\"#webpack安装步骤\" class=\"headerlink\" title=\"webpack安装步骤\"></a>webpack安装步骤</h2><ol>\n<li>首先得有Node.js</li>\n<li><p>其次全局安装webpack</p>\n<pre><code>npm install -g webpack\n</code></pre></li>\n<li><p>在项目目录中安装webpack和插件</p>\n<pre><code>npm install —save-dev webpack\n</code></pre></li>\n<li><p>配置webpack</p>\n</li>\n</ol>\n<h2 id=\"webpack配置\"><a href=\"#webpack配置\" class=\"headerlink\" title=\"webpack配置\"></a>webpack配置</h2><p>默认使用webpack.config.js</p>\n<pre><code>var path = require(&apos;path&apos;);\nmodule.exports = {\n    entry:&apos;./jsx/app.jsx&apos;,\n    output:{\n        path: path.join(__dirname , &quot;/build&quot;),\n        filename:&apos;app.js&apos;\n    },\n    module:{\n        loaders:[\n            {\n                test:/\\.(js|jsx)$/,\n                loaders:[&apos;babel&apos;],\n                exclude:[path.join(__dirname , &quot;/build&quot;)]\n            }\n        ]\n    }\n};\n</code></pre><p>其中<em>entry</em>是入口文件，<em>output</em>是编译后输出文件，<em>module</em>中<em>loaders</em>是解析操作</p>\n<p>##未完待续</p>\n","excerpt":"","more":"<h2 id=\"什么是webpack\"><a href=\"#什么是webpack\" class=\"headerlink\" title=\"什么是webpack\"></a>什么是webpack</h2><p>事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包</p>\n<h2 id=\"webpack安装步骤\"><a href=\"#webpack安装步骤\" class=\"headerlink\" title=\"webpack安装步骤\"></a>webpack安装步骤</h2><ol>\n<li>首先得有Node.js</li>\n<li><p>其次全局安装webpack</p>\n<pre><code>npm install -g webpack\n</code></pre></li>\n<li><p>在项目目录中安装webpack和插件</p>\n<pre><code>npm install —save-dev webpack\n</code></pre></li>\n<li><p>配置webpack</p>\n</li>\n</ol>\n<h2 id=\"webpack配置\"><a href=\"#webpack配置\" class=\"headerlink\" title=\"webpack配置\"></a>webpack配置</h2><p>默认使用webpack.config.js</p>\n<pre><code>var path = require(&apos;path&apos;);\nmodule.exports = {\n    entry:&apos;./jsx/app.jsx&apos;,\n    output:{\n        path: path.join(__dirname , &quot;/build&quot;),\n        filename:&apos;app.js&apos;\n    },\n    module:{\n        loaders:[\n            {\n                test:/\\.(js|jsx)$/,\n                loaders:[&apos;babel&apos;],\n                exclude:[path.join(__dirname , &quot;/build&quot;)]\n            }\n        ]\n    }\n};\n</code></pre><p>其中<em>entry</em>是入口文件，<em>output</em>是编译后输出文件，<em>module</em>中<em>loaders</em>是解析操作</p>\n<p>##未完待续</p>\n"}],"PostAsset":[],"PostCategory":[],"PostTag":[{"post_id":"ciq3hvsrf000008d78eea1iy0","tag_id":"ciq3hvsrn000208d7btz43tel","_id":"ciq3hvsrs000508d75sluyygt"},{"post_id":"ciq3hvsrl000108d7c3xee57y","tag_id":"ciq3hvsrn000208d7btz43tel","_id":"ciq3hvsrt000708d7g3n4136m"},{"post_id":"ciq3hvsrq000308d7lgmyt5qu","tag_id":"ciq3hvsrt000608d7vgx1dvye","_id":"ciq3hvsrw000808d74lm5tuxw"}],"Tag":[{"name":"技术文档","_id":"ciq3hvsrn000208d7btz43tel"},{"name":"分享日志","_id":"ciq3hvsrt000608d7vgx1dvye"}]}}