HTML ±¾µØ´æ´¢
HTML ±¾µØ´æ´¢£ºÓÅÓÚ cookies¡£
ʲôÊÇ HTML ±¾µØ´æ´¢£¿
ͨ¹ý±¾µØ´æ´¢£¨Local Storage£©£¬web Ó¦ÓóÌÐòÄܹ»ÔÚÓû§ä¯ÀÀÆ÷ÖжÔÊý¾Ý½øÐб¾µØµÄ´æ´¢¡£
ÔÚ HTML5 ֮ǰ£¬Ó¦ÓóÌÐòÊý¾ÝÖ»ÄÜ´æ´¢ÔÚ cookie ÖУ¬°üÀ¨Ã¿¸ö·þÎñÆ÷ÇëÇó¡£±¾µØ´æ´¢Ôò¸ü°²È«£¬²¢ÇÒ¿ÉÔÚ²»Ó°ÏìÍøÕ¾ÐÔÄܵÄǰÌáϽ«´óÁ¿Êý¾Ý´æ´¢ÓÚ±¾µØ¡£
Óë cookie ²»Í¬£¬´æ´¢ÏÞÖÆÒª´óµÃ¶à£¨ÖÁÉÙ5MB£©£¬²¢ÇÒÐÅÏ¢²»»á±»´«Êäµ½·þÎñÆ÷¡£
±¾µØ´æ´¢¾ÓÉÆðÔ´µØ£¨origin£©£¨¾ÓÉÓòºÍÐÒ飩¡£ËùÓÐÒ³Ãæ£¬´ÓÆðÔ´µØ£¬Äܹ»´æ´¢ºÍ·ÃÎÊÏàͬµÄÊý¾Ý¡£
ä¯ÀÀÆ÷Ö§³Ö
±í¸ñÖеÄÊý×éָʾÁËÍêȫ֧³Ö±¾µØ´æ´¢µÄÊ׸öä¯ÀÀÆ÷°æ±¾¡£
API | |||||
Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML ±¾µØ´æ´¢¶ÔÏó
HTML ±¾µØ´æ´¢ÌṩÁËÁ½¸öÔÚ¿Í»§¶Ë´æ´¢Êý¾ÝµÄ¶ÔÏó£º
- window.localStorage - ´æ´¢Ã»ÓнØÖ¹ÈÕÆÚµÄÊý¾Ý
- window.sessionStorage - Õë¶ÔÒ»¸ö session À´´æ´¢Êý¾Ý£¨µ±¹Ø±Õä¯ÀÀÆ÷±êǩҳʱÊý¾Ý»á¶ªÊ§£©
ÔÚʹÓñ¾µØ´æ´¢Ê±£¬Çë¼ì²â localStorage ºÍ sessionStorage µÄä¯ÀÀÆ÷Ö§³Ö£º
if (typeof(Storage) !== "undefined") { // Õë¶Ô localStorage/sessionStorage µÄ´úÂë } else { // ±§Ç¸£¡²»Ö§³Ö Web Storage .. }
localStorage ¶ÔÏó
localStorage ¶ÔÏó´æ´¢µÄÊÇûÓнØÖ¹ÈÕÆÚµÄÊý¾Ý¡£µ±ä¯ÀÀÆ÷±»¹Ø±ÕʱÊý¾Ý²»»á±»É¾³ý£¬ÔÚÏÂÒ»Ìì¡¢ÖÜ»òÄêÖУ¬¶¼ÊÇ¿ÉÓõġ£
ʵÀý
// ´æ´¢ localStorage.setItem("lastname", "Gates"); // È¡»Ø document.getElementById("result").innerHTML = localStorage.getItem("lastname");
ʵÀý½âÊÍ£º
- ´´½¨ localStorage Ãû³Æ/Öµ¶Ô£¬ÆäÖУºname="lastname"£¬value="Gates"
- È¡»Ø "lastname" µÄÖµ£¬²¢°ÑËü²åµ½ id="result" µÄÔªËØÖÐ
ÉÏÀýÒ²¿ÉÕâÑùд£º
// ´æ´¢ localStorage.lastname = "Gates"; // È¡»Ø document.getElementById("result").innerHTML = localStorage.lastname;
ɾ³ý "lastname" localStorage ÏîÄ¿µÄÓï·¨ÈçÏ£º
localStorage.removeItem("lastname");
×¢ÊÍ£ºÃû³Æ/Öµ¶ÔʼÖմ洢Ϊ×Ö·û´®¡£Èç¹ûÐèÒªÇë¼ÇµÃ°ÑËüÃÇת»»ÎªÆäËû¸ñʽ£¡
ÏÂÃæµÄÀý×Ó¶ÔÓû§µã»÷°´Å¥µÄ´ÎÊý½øÐмÆÊý¡£ÔÚ´úÂëÖУ¬Öµ×Ö·û´®±»×ª»»ÎªÊýÖµ£¬ÒÀ´Î¶Ô¼ÆÊý½øÐеÝÔö£º
ʵÀý
if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "ÄúÒѾµã»÷Õâ¸ö°´Å¥ " + localStorage.clickcount + " ´Î¡£";
sessionStorage ¶ÔÏó
sessionStorage ¶ÔÏóµÈͬ localStorage ¶ÔÏ󣬲»Í¬Ö®´¦ÔÚÓÚÖ»¶ÔÒ»¸ö session ´æ´¢Êý¾Ý¡£Èç¹ûÓû§¹Ø±Õ¾ßÌåµÄä¯ÀÀÆ÷±êǩҳ£¬Êý¾ÝÒ²»á±»É¾³ý¡£
ÏÂÀýÔÚµ±Ç° session ÖжÔÓû§µã»÷°´Å¥½øÐмÆÊý£º
ʵÀý
if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "ÔÚ±¾ session ÖУ¬ÄúÒѾµã»÷Õâ¸ö°´Å¥ " + sessionStorage.clickcount + " ´Î¡£";