HTML5¼¼Êõ

HTMl5µÄsessionStorageºÍlocalStorage - ÁùÒ»¶ùͯ½Ú

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2017-08-14 11:00 ÎÒÒªÆÀÂÛ( )

°Ù¶ÈÉϰٶȵÄ,¼Ç¼һÏÂ: html5ÖеÄWeb Storage°üÀ¨ÁËÁ½ÖÖ´æ´¢·½Ê½£ºsessionStorageºÍlocalStorage¡£ sessionStorageÓÃÓÚ±¾µØ´æ´¢Ò»¸ö»á»°£¨session£©ÖеÄÊý¾Ý£¬ÕâЩÊý¾ÝÖ»ÓÐÔÚͬһ¸ö»á»°ÖеÄÒ³Ãæ²ÅÄÜ·ÃÎʲ¢ÇÒµ±»á»°½áÊøºóÊý¾ÝÒ²ËæÖ®Ïú»Ù¡£Òò´ËsessionStorage

°Ù¶ÈÉϰٶȵÄ,¼Ç¼һÏÂ:

html5ÖеÄWeb Storage°üÀ¨ÁËÁ½ÖÖ´æ´¢·½Ê½£ºsessionStorageºÍlocalStorage¡£

sessionStorageÓÃÓÚ±¾µØ´æ´¢Ò»¸ö»á»°£¨session£©ÖеÄÊý¾Ý£¬ÕâЩÊý¾ÝÖ»ÓÐÔÚͬһ¸ö»á»°ÖеÄÒ³Ãæ²ÅÄÜ·ÃÎʲ¢ÇÒµ±»á»°½áÊøºóÊý¾ÝÒ²ËæÖ®Ïú»Ù¡£Òò´ËsessionStorage²»ÊÇÒ»Öֳ־û¯µÄ±¾µØ´æ´¢£¬½ö½öÊǻỰ¼¶±ðµÄ´æ´¢¡£

¶ølocalStorageÓÃÓڳ־û¯µÄ±¾µØ´æ´¢£¬³ý·ÇÖ÷¶¯É¾³ýÊý¾Ý£¬·ñÔòÊý¾ÝÊÇÓÀÔ¶²»»á¹ýÆڵġ£

web storageºÍcookieµÄÇø±ð

Web StorageµÄ¸ÅÄîºÍcookieÏàËÆ£¬Çø±ðÊÇËüÊÇΪÁ˸ü´óÈÝÁ¿´æ´¢Éè¼ÆµÄ¡£CookieµÄ´óСÊÇÊÜÏ޵ģ¬²¢ÇÒÿ´ÎÄãÇëÇóÒ»¸öеÄÒ³ÃæµÄʱºòCookie¶¼»á±»·¢Ë͹ýÈ¥£¬ÕâÑùÎÞÐÎÖÐÀË·ÑÁË´ø¿í£¬ÁíÍâcookie»¹ÐèÒªÖ¸¶¨×÷ÓÃÓò£¬²»¿ÉÒÔ¿çÓòµ÷Óá£

³ý´ËÖ®Í⣬Web StorageÓµÓÐsetItem,getItem,removeItem,clearµÈ·½·¨£¬²»ÏñcookieÐèҪǰ¶Ë¿ª·¢Õß×Ô¼º·â×°setCookie£¬getCookie¡£

µ«ÊÇCookieÒ²ÊDz»¿ÉÒÔ»òȱµÄ£ºCookieµÄ×÷ÓÃÊÇÓë·þÎñÆ÷½øÐн»»¥£¬×÷ΪHTTP¹æ·¶µÄÒ»²¿·Ö¶ø´æÔÚ £¬¶øWeb Storage½ö½öÊÇΪÁËÔÚ±¾µØ¡°´æ´¢¡±Êý¾Ý¶øÉú£¨À´×Ô@otakustay µÄ¾ÀÕý£©

html5 web storageµÄä¯ÀÀÆ÷Ö§³ÖÇé¿ö

ä¯ÀÀÆ÷µÄÖ§³Ö³ýÁËIE£·¼°ÒÔϲ»Ö§³ÖÍ⣬ÆäËû±ê×¼ä¯ÀÀÆ÷¶¼ÍêÈ«Ö§³Ö(ie¼°FFÐèÔÚweb·þÎñÆ÷ÀïÔËÐÐ)£¬ÖµµÃÒ»ÌáµÄÊÇIE×ÜÊÇ°ìºÃÊ£¬ÀýÈçIE7¡¢IE6ÖеÄUserDataÆäʵ¾ÍÊÇjavascript±¾µØ´æ´¢µÄ½â¾ö·½°¸¡£Í¨¹ý¼òµ¥µÄ´úÂë·â×°¿ÉÒÔͳһµ½ËùÓеÄä¯ÀÀÆ÷¶¼Ö§³Öweb storage¡£

ÒªÅжÏä¯ÀÀÆ÷ÊÇ·ñÖ§³ÖlocalStorage¿ÉÒÔʹÓÃÏÂÃæµÄ´úÂ룺

if(window.localStorage){ alert("ä¯ÀÀÖ§³ÖlocalStorage") }else{ alert("ä¯ÀÀÔݲ»Ö§³ÖlocalStorage") } //»òÕß if(typeof window.localStorage == 'undefined'){ alert("ä¯ÀÀÔݲ»Ö§³ÖlocalStorage") }

localStorageºÍsessionStorage²Ù×÷

localStorageºÍsessionStorage¶¼¾ßÓÐÏàͬµÄ²Ù×÷·½·¨£¬ÀýÈçsetItem¡¢getItemºÍremoveItemµÈ

localStorageºÍsessionStorageµÄ·½·¨ setItem´æ´¢value

ÓÃ;£º½«value´æ´¢µ½key×Ö¶Î
Ó÷¨£º.setItem( key, value)
´úÂëʾÀý£º

sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

getItem»ñÈ¡value

ÓÃ;£º»ñÈ¡Ö¸¶¨key±¾µØ´æ´¢µÄÖµ
Ó÷¨£º.getItem(key)
´úÂëʾÀý£º

var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

removeItemɾ³ýkey

ÓÃ;£ºÉ¾³ýÖ¸¶¨key±¾µØ´æ´¢µÄÖµ
Ó÷¨£º.removeItem(key)
´úÂëʾÀý£º

sessionStorage.removeItem("key"); localStorage.removeItem("site");

clearÇå³ýËùÓеÄkey/value

ÓÃ;£ºÇå³ýËùÓеÄkey/value
Ó÷¨£º.clear()
´úÂëʾÀý£º

sessionStorage.clear(); localStorage.clear();

ÆäËû²Ù×÷·½·¨£ºµã²Ù×÷ºÍ[]

web Storage²»µ«¿ÉÒÔÓÃ×ÔÉíµÄsetItem,getItemµÈ·½±ã´æÈ¡£¬Ò²¿ÉÒÔÏñÆÕͨ¶ÔÏóÒ»ÑùÓõã(.)²Ù×÷·û£¬¼°[]µÄ·½Ê½½øÐÐÊý¾Ý´æ´¢£¬ÏñÈçϵĴúÂ룺

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);

localStorageºÍsessionStorageµÄkeyºÍlengthÊôÐÔʵÏÖ±éÀú

sessionStorageºÍlocalStorageÌṩµÄkey()ºÍlength¿ÉÒÔ·½±ãµÄʵÏÖ´æ´¢µÄÊý¾Ý±éÀú£¬ÀýÈçÏÂÃæµÄ´úÂ룺

var storage = window.localStorage; for (var i=0, len = storage.length; i < len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }

storageʼþ

storage»¹ÌṩÁËstorageʼþ£¬µ±¼üÖµ¸Ä±ä»òÕßclearµÄʱºò£¬¾Í¿ÉÒÔ´¥·¢storageʼþ£¬ÈçÏÂÃæµÄ´úÂë¾ÍÌí¼ÓÁËÒ»¸östorageʼþ¸Ä±äµÄ¼àÌý£º

if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ if(!e){e=window.event;} }
storageʼþ¶ÔÏóµÄ¾ßÌåÊôÐÔÈçÏÂ±í£º

Property Type Description

key String The named key that was added, removed, or moddified

oldValue Any The previous value(now overwritten), or null if a new item was added

newValue Any The new value, or null if an item was added

url/uri String The page that called the method that triggered this change

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • HTML5.1 ÍƼöÖÐ 1.5.3. Extensibility ¶ÎÂä·­Òë - *Ë®ÔÂ*

    HTML5.1 ÍƼöÖÐ 1.5.3. Extensibility ¶ÎÂä·­Òë - *Ë®ÔÂ*

    2017-08-10 13:01

  • HTML5ʹÓÃCanvasÀ´»æÖÆͼÐÎ - С¾ý¾ýµÄ²©¿Í

    HTML5ʹÓÃCanvasÀ´»æÖÆͼÐÎ - С¾ý¾ýµÄ²©¿Í

    2017-08-02 12:00

  • HTML5ѧϰ--SVGÈ«¹¥ÂÔ£¨»ù´¡Æª£© - ¾Ñ»÷ÊÖ+

    HTML5ѧϰ--SVGÈ«¹¥ÂÔ£¨»ù´¡Æª£© - ¾Ñ»÷ÊÖ+

    2017-07-29 16:04

  • html5¶¯»­Ö®µÈ´ý¼ÓÔض¯»­ - è-Ç°¶Ë֮·

    html5¶¯»­Ö®µÈ´ý¼ÓÔض¯»­ - è-Ç°¶Ë֮·

    2017-07-28 10:02

ÍøÓѵãÆÀ
í