µÚ3Õ¡þHTML5±à³Ì»ù´¡ HTML5 ÔÚ2012ÄêÒÑÐγÉÁËÎȶ¨µÄ°æ±¾¡£HTML5½«Web´øÈëÒ»¸ö³ÉÊìµÄÓ¦ÓÃÆ½Ì¨£¬ÔÚÕâ¸öƽ̨ÉÏ£¬ÊÓÆµ¡¢ÒôƵ¡¢Í¼Ïñ¡¢¶¯»­ÒÔ¼°ÓëÉ豸µÄ½»»¥¶¼½øÐÐÁ˹淶¡£ 3ª²1Web ³Ö¾Ã»¯ ´æ´¢ 3£®1HTML5 Web´æ´¢ HTML5ÌṩÁËÁ½ÖÖÔÚ¿Í»§¶Ë´æ´¢Êý¾ÝµÄз½·¨£º Ò»ÖÖÊÇûÓÐʱ¼äÏÞÖÆµÄÊý¾Ý´æ´¢localStorage£¬ÁíÍâÒ»ÖÖÊÇÕë¶ÔsessionµÄÊý¾Ý´æ´¢sessionStorage¡£ 3£®1£®1localStorage³Ö¾Ã»¯´æ´¢ cookie ´æ´¢Êý¾Ý²»Äܳ¬¹ý4KB£¬²»Êʺϴ洢´óÁ¿µÄÊý¾Ý£¬ÒòΪËüÃÇÓÉÿ¸ö¶Ô·þÎñÆ÷µÄÇëÇóÀ´´«µÝ£¬ÕâʹµÃ cookie ËٶȺÜÂý¶øÇÒЧÂÊÒ²²»¸ß¡£ÔÚHTML5ÖУ¬Êý¾Ý²»ÊÇÓÉÿ¸ö·þÎñÆ÷ÇëÇ󴫵ݵ쬶øÊÇÖ»ÓÐÔÚÇëÇóʱʹÓÃÊý¾Ý¡£ËüÔÚ²»Ó°ÏìÍøÕ¾ÐÔÄܵÄÇé¿öÏ´洢´óÁ¿Êý¾Ý³ÉΪ¿ÉÄÜ¡£¶ÔÓÚ²»Í¬µÄÍøÕ¾£¬Êý¾Ý´æ´¢ÓÚ²»Í¬µÄÇøÓò£¬²¢ÇÒÒ»¸öÍøÕ¾Ö»ÄÜ·ÃÎÊÆä×ÔÉíµÄÊý¾Ý¡£ localStorage·½·¨´æ´¢µÄÊý¾ÝûÓÐʱ¼äÏÞÖÆ£¬ÓÃÓÚ³¤¾Ã±£´æÕû¸öÍøÕ¾µÄÊý¾Ý£¬±£´æµÄÊý¾ÝûÓйýÆÚʱ¼ä£¬Ö±µ½ÊÖ¶¯È¥É¾³ý¡£localStorageµÄ´æ´¢¸ñʽ¶¼ÊÇ×Ö·û´®£¬ÈÎºÎÆäËûÀàÐͶ¼»áת³É×Ö·û´®´æ´¢¡£ ÅжÏä¯ÀÀÆ÷ÊÇ·ñÖ§³ÖlocalStorage£¬¿ÉÒÔͨ¹ýÏÂÃæµÄÓï¾äʵÏÖ¡£ ×÷Ϊһ¸ö΢Ðͱ¾µØ¡°Êý¾Ý¿â¡±Ê¹Óã¬localStorageÈçºÎʵÏÖÊý¾ÝµÄÔöɾ¸Ä²éÄØ£¿ Ö±½Ó¸³Öµ£º localStorage.a = 1£» localStorage£Û'a'£Ý = 1£» localStorage.setItem('a','1'); //localStorage±¾ÉíÒ²ÓдæÖµµÄ·½·¨setItem ɾ³ýÊý¾Ý£º localStorage.removeItem('a'); //Çå³ýaµÄÖµ localStorage.clear(); //ËùÓÐÊý¾Ý¶¼»áÏû³ýµô Ö±½Ó»ñÈ¡ºÍgetItem·½·¨¶Áȡֵ£º var a1 = localStorage£Û'a'£Ý; //»ñÈ¡aµÄÖµ var a2 = localStorage.a; //»ñÈ¡aµÄÖµ var a3 = localStorage.getItem('a'); //»ñÈ¡aµÄÖµ localStorage»¹ÌṩÁËkey·½·¨ÓÃÓÚ±éÀú£º function showStorage(){ for(var i=0;i

Ë¢ÐÂÒ³Ãæ»á¿´µ½¼ÆÊýÆ÷ÔÚÔö³¤¡£

Çë¹Ø±Õä¯ÀÀÆ÷´°¿Ú£¬È»ºóÔÙÊÔÒ»´Î£¬¼ÆÊýÆ÷»á¼ÌÐø¼ÆÊý¡£

³ÌÐòÔËÐнá¹ûÈçͼ3ª²1ºÍͼ3ª²2Ëùʾ¡£ ͼ3ª²1ä¯ÀÀÆ÷ÊÇ·ñÖ§³ÖlocalStorageÔËÐнá¹û ͼ3ª²2¹ÜÀílocalStorageÊý¾ÝÔËÐнá¹û 3£®1£®2sessionStorageÁÙʱÐÔ´æ´¢ sessionStorageÕë¶ÔÒ»¸ösession´æ´¢Êý¾Ý£¬µ±Óû§¹Ø±Õä¯ÀÀÆ÷´°¿ÚºóÊý¾Ý»á±»É¾³ý¡£Ä¬ÈÏÇé¿öÏ£¬sessionStorage=window£®sessionStorage£º ÅжÏä¯ÀÀÆ÷ÊÇ·ñÖ§³ÖsessionStorage£º ±£´æÊý¾ÝÓï·¨£º ¶ÁÈ¡Êý¾ÝÓï·¨£º ɾ³ýÖ¸¶¨¼üµÄÊý¾ÝÓï·¨£º ɾ³ýËùÓÐÊý¾Ý£º ¡¾Àý3ª²2¡¿sessionStorageµÄʵÀý¡£ 3£®1£®3HTML5°²È«·çÏÕÖ®WebStorage¹¥»÷ HTML5Ö§³ÖWebStorage£¬¿ª·¢Õß¿ÉÒÔΪӦÓô´½¨±¾µØ´æ´¢£¬´æ´¢Ò»Ð©ÓÐÓõÄÐÅÏ¢¡£ÀýÈ磬localStorage¿ÉÒÔ³¤ÆÚ´æ´¢£¬¶øÇÒ´æ·Å¿Õ¼äºÜ´ó£¬Ò»°ãÊÇ5MB£¬¼«´óµØ½â¾öÁË֮ǰֻÄÜÓÃcookieÀ´´æ´¢Êý¾ÝµÄÈÝÁ¿Ð¡¡¢´æÈ¡²»±ã¡¢ÈÝÒ×±»Çå³ýµÄÎÊÌâ¡£Õâ¸ö¹¦ÄÜΪ¿Í»§¶ËÌṩÁ˼«´óµÄÁé»îÐÔ¡£ ÒòΪlocalStorageµÄAPI¶¼ÊÇͨ¹ýJavaScriptÌṩµÄ£¬¹¥»÷Õß¿ÉÒÔͨ¹ýXSS¹¥»÷ÇÔÈ¡ÐÅÏ¢£¬ÀýÈ磬Óû§token»òÕß×ÊÁÏ£¬»ò¿ÉÒÔÓÃÏÂÃæµÄ½Å±¾±éÀú±¾µØ´æ´¢¡£ ¡¾Àý3ª²3¡¿localStorageµÄ½Å±¾±éÀú±¾µØ´æ´¢¡£ Web ¹¥»÷ localStorage²¢²»ÊÇΨһ±©Â¶±¾µØÐÅÏ¢µÄ·½Ê½,ºÜ¶à¿ª·¢ÕßÓÐÒ»¸ö²»ºÃµÄϰ¹ß£¬ÎªÁË·½±ã£¬°ÑºÜ¶à¹Ø¼üÐÅÏ¢·ÅÔÚÈ«¾Ö±äÁ¿ÀÈçÓû§Ãû¡¢ÃÜÂë¡¢ÓÊÏäµÈ¡£Êý¾Ý²»·ÅÔÚºÏÊʵÄ×÷ÓÃÓòÀï»á´øÀ´ÑÏÖØµÄ°²È«ÎÊÌ⣬ÀýÈ磬¿ÉÒÔÓÃÏÂÃæµÄ½Å±¾±éÀúÈ«¾Ö±äÁ¿À´»ñÈ¡ÐÅÏ¢¡£ ¡¾Àý3ª²4¡¿JavaScript½Å±¾±éÀúÈ«¾Ö±äÁ¿À´»ñÈ¡ÐÅÏ¢¡£ JavaScript½Å±¾±éÀúÈ«¾Ö±äÁ¿À´»ñÈ¡ÐÅÏ¢ HTML5 dumpµÄ¶¨ÒåÊÇ¡°JavaScript that dump all HTML5 local storage¡±£¬ÄÜÊä³öHTML5 sessionStorage¡¢È«¾Ö±äÁ¿¡¢localStorageºÍ±¾µØÊý¾Ý¿â´æ´¢¡£·ÀÓùÖ®µÀ¾ÍÊÇÊý¾Ý·ÅÔÚºÏÊʵÄ×÷ÓÃÓòÀï¡£ÈçÓû§sessionID¾Í²»ÓÃlocalStorage£¬¶øÓÃsessionStorage¡£Óû§Êý¾Ý²»Òª´æ´¢ÔÚÈ«¾Ö±äÁ¿À¶øÊÇ·ÅÔÚÁÙʱ±äÁ¿»òÕß¾Ö²¿±äÁ¿À²»Òª½«ÖØÒªÊý¾Ý´æ´¢ÔÚWebStorageÀï¡£ÍòÎﻥÁªµÄʱ´ú£¬»úÓöÓëÌôÕ½²¢´æ£¬±ãÀûºÍ·çÏÕ¹²Éú¡£¡°ÍøÂ簲ȫǣһ·¢¶ø¶¯È«Éí¡±¡°Ã»ÓÐÍøÂ簲ȫ¾ÍûÓйú¼Ò°²È«¡±£¬×÷ΪWeb¹¤³Ìʦ£¬Ó¦Ê±¿ÌÓÐÍøÂ簲ȫÒâʶ¡£ 3ª²2Canvas »æÖƼ¸ºÎ ÐÎ×´ 3£®2HTML5ÄÚÈݱêÇ© 3£®2£®1datalist±êÇ© ΪÁË·½±ãÓû§µÄÊäÈ룬WebÉè¼ÆÖо­³£»áÓõ½ÊäÈë¿òµÄ×Ô¶¯ÏÂÀ­Ìáʾ¡£ÔÚÒÔǰҪʵÏÖÕâÑùµÄ¹¦ÄÜ£¬±ØÐëÒªÇ󿪷¢ÕßʹÓÃһЩJavaScriptµÄ¼¼ÇÉ»òÏà¹ØµÄ¿ò¼Ü½øÐÐAjaxµ÷Óã¬ÐèÒªÒ»¶¨µÄ±à³Ì¹¤×÷Á¿¡£¶øHTML5µÄ±ê¼Ç¾ÍÄÜ¿ìËÙ¿ª·¢³öÊ®·ÖƯÁÁµÄAutoComplete×é¼þµÄЧ¹û¡£ datalistÌṩһ¸öÊÂÏȶ¨ÒåºÃµÄÁÐ±í£¬Í¨¹ýidÓëinput¹ØÁª£¬µ±ÔÚinputÄÚÊäÈëʱ¾Í»áÓÐ×Ô¶¯Íê³ÉµÄ¹¦ÄÜ£¬Óû§½«»á¿´¼ûÒ»¸öÏÂÀ­ÁÐ±í¹©ÆäÑ¡Ôñ¡£ ¡¾Óï·¨¡¿ ÓëinputÔªËØÅäºÏʹÓøÃÔªËØ£¬datalist ¼°ÆäÑ¡Ïî²»»á±»ÏÔʾ³öÀ´£¬Ëü½ö½öÊǺϷ¨µÄÊäÈëÖµÁÐ±í¡£¿ÉʹÓÃinputÔªËØµÄlistÊôÐÔÀ´°ó¶¨ datalist¡£ ¡¾Àý3ª²5¡¿datalistµÄÊäÈëÌáʾʹÓᣠdatalistÊý¾ÝÁбí ÔËÐнá¹ûÈçͼ3ª²3Ëùʾ¡£ÊäÈë¹ý³Ì¾ßÓÐÖÇÄÜÌáʾЧ¹û£¬Èçͼ3ª²4Ëùʾ¡£Í¨³£Ê¹ÓÃselectÖÆ×÷ÏÂÀ­²Ëµ¥£¬µ«ÊÇÔÚHTML5Ö®ºó£¬datalistÒ²¿ÉÒԳ䵱selectµÄ½ÇÉ«¡£ ͼ3ª²3datalistÌí¼ÓÑ¡ÏîÖµ ͼ3ª²4datalistµÄÊäÈëÌáʾ 3£®2£®2detailsºÍsummary±êÇ©
±êÇ©ÓÃÓÚÃèÊöÎĵµ»òÎĵµÄ³¸ö²¿·ÖµÄϸ½Ú¡£Óë±êÇ©ÅäºÏʹÓÿÉÒÔΪdetails¶¨Òå±êÌâ¡£±êÌâÊǿɼûµÄ£¬Óû§µ¥»÷±êÌâʱ£¬»áÏÔʾ³ödetails¡£ ¡¾Àý3ª²6¡¿
±êÇ©µÄÓ¦ÓᣠDocument
ÈýÈ«½ÌÓý

¡°ÈýÈ«ÓýÈË¡±¼´È«Ô±ÓýÈË¡¢È«³ÌÓýÈË¡¢È«·½Î»ÓýÈË£¬ÊÇÖй²ÖÐÑë¡¢¹úÎñÔº¡¶¹ØÓÚ¼ÓÇ¿ºÍ¸Ä½øÐÂÐÎÊÆÏ¸ßУ˼ÏëÕþÖι¤×÷µÄÒâ¼û¡·Ìá³öµÄ¼á³ÖȫԱȫ¹ý³ÌÈ«·½Î»ÓýÈË(¼ò³Æ¡°ÈýÈ«ÓýÈË¡±)µÄÒªÇó £Û1£Ý ¡£

ÔËÐÐЧ¹ûÈçͼ3ª²5Ëùʾ£¬µ¥»÷ºóÈçͼ3ª²6Ëùʾ¡£ ͼ3ª²5summaryÔËÐÐЧ¹û ͼ3ª²6details±êǩʵÀý 3£®2£®3output±êÇ© ¡¾Óï·¨¡¿ ĬÈÏÄÚÈÝ ±êÇ©ÖеÄÄÚÈÝΪĬÈÏÏÔʾÄÚÈÝ£¬Ëü»áËæ×ÅÏà¹ØÔªËØµÄ¸Ä±ä¶ø±ä»¯£¬¾ßÌåÊôÐÔºÍȡֵÈç±í3ª²1Ëùʾ¡£ ±í3ª²1output±êÇ©³£ÓõÄÊôÐÔºÍȡֵ ÊôÐÔȡֵÃèÊö forelement_id¶¨ÒåÊä³öÓòÏà¹ØµÄÒ»¸ö»ò¶à¸öÔªËØ formform_id¶¨ÒåÊäÈë×Ö¶ÎËùÊôµÄÒ»¸ö»ò¶à¸ö±íµ¥ namename¶¨Òå¶ÔÏóµÄΨһÃû³Æ(±íµ¥ÌύʱʹÓÃ) ¡¾Àý3ª²7¡¿±êÇ©µÄÓ¦ÓᣠHTML5
0 100 + =
ÔËÐÐЧ¹ûÈçͼ3ª²7Ëùʾ¡£ ͼ3ª²7output±êǩʵÀý oninputʼþ,µ±Óû§ÏòÖг¢ÊÔÊäÈëʱִÐÐJavaScript£º oninputʼþÔÚÓû§ÊäÈëʱ´¥·¢,¸ÃʼþÔÚinput»òtextareaÔªËØµÄÖµ·¢Éú¸Ä±äʱ´¥·¢¡£¸ÃʼþÀàËÆÓÚonchangeʼþ¡£²»Í¬Ö®´¦ÔÚÓÚoninputʼþÔÚÔªËØÖµ·¢Éú±ä»¯Ê±Á¢¼´´¥·¢£¬onchangeÔÚÔªËØÊ§È¥½¹µãʱ´¥·¢¡£ 3£®2£®4time±êÇ©