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 + " ´Î¡£";

Ç××ÔÊÔÒ»ÊÔ

VUE