localStorageãsessionStorageããããã¯indexedDBã®ãããªãã©ã¦ã¶ä¸ã§ã®ãã¼ã¿ã®ä¿åãå¯è½ã«ãªã£ããã¨ã§ãããããåãæ±ãããã§ãã»ãã¥ãªãã£ä¸ã®æ³¨æç¹ãå¿
è¦ã§ããã
ãããã®ã¹ãã¬ã¼ã¸ã¯ãlocalStorageãindexedDBã¯æ°¸ç¶çã«ãsessionStorageã¯ãã©ã¦ã¶ãã¿ããéããã¾ã§ã®éãã¼ã¿ãä¿æããç¶ããã®ã§ãä¾ãã°Webã¢ããªã±ã¼ã·ã§ã³ããã°ã¤ã³æ©æ§ãæã£ã¦ããå ´åã«ãã°ã¤ã³ä¸ã«ãããã®ã¹ãã¬ã¼ã¸ã«æ¸ãè¾¼ã¾ãããã¼ã¿ã¯ããã°ã¢ã¦ãå¾ãå½ç¶åç
§ããã³æ¸ãæããå¯è½ã§ãããWebã¢ããªã±ã¼ã·ã§ã³ä¸ã®ã¢ã«ã¦ã³ãã«ç´ã¥ãããã¼ã¿ããããã®ã¹ãã¬ã¼ã¸ã«æ¸ãè¾¼ãã§ããå ´åããã°ã¢ã¦ãå¾ãã¢ã¯ã»ã¹å¯è½ãªãã¨ãåé¡ãå¼ãèµ·ããå¯è½æ§ãããã
ä¾ãã°Twitterã®ãããªãµã¼ãã¹ããã£ãã¨ãã¦ã(navigator.onLineããããã£ãªã©ãå©ç¨ãã¦)ãªãã©ã¤ã³æã«ã¯ã¦ã¼ã¶ã®çºè¨ããµã¼ãã«POSTããã®ã§ã¯ãªãlocalStorageã«ä¸æçã«ä¿åããåç·ããªã³ã©ã¤ã³ã«å復ããã¨ãã«localStorageã®å
容ããµã¼ãã«æ¹ãã¦POSTãããããªä½ãæ¹ããã¦ããã¨ãããããã§ã以ä¸ã®ãããªæµããèããã
- ã¦ã¼ã¶Xã¨ãã¦ãµã¼ãã¹ã«ãã°ã¤ã³
- åç·ããªãã©ã¤ã³ã«ãªã
- ä½ãçºè¨ããã¹ããããã®ã®ããªãã©ã¤ã³ãªã®ã§localStorageã«ä¿åããã
- åç·ããªã³ã©ã¤ã³ã«å復ãã
- ãã°ã¢ã¦ããã(localStorageã«ã¯çºè¨ãã¼ã¿ãæ®ã£ãã¾ã¾!)
- ç°ãªãã¦ã¼ã¶Yã¨ãã¦ãµã¼ãã¹ã«ãã°ã¤ã³
- localStorageå ã®ãã¼ã¿ãã¦ã¼ã¶Yã¨ãã¦ãµã¼ãã«POSTããã
ãã®ããã«ãæ¬æ¥ã§ããã°ã¦ã¼ã¶Xã¨ãã¦ã®çºè¨å
容ãã¦ã¼ã¶Yã®çºè¨ã¨ãã¦ãµã¼ãã«éä¿¡ããã¦ãã¾ãå¯è½æ§ãããã
ãããã¯ãæ©å¯æ
å ±ãå«ããããªã¦ã¼ã¶åºæã®è¨å®å¤ãlocalStorageã«ãã£ãã·ã¥ã¨ãã¦ä¿åãã¦ããã¨ãã¦ãlocalStorageå
ã«ãã£ãã·ã¥ãããã°ãããåªå
ãã¦ä½¿ç¨ããã¨ããè¨è¨ã®å ´åã«ã¯ãè¨å®ç»é¢ã§ç°ãªãã¦ã¼ã¶ã®æ©å¯æ
å ±ã表示ããã¦ãã¾ã£ããããããã¯ä»ã®ã¦ã¼ã¶ã®è¨å®ã«å¾ã£ãæåããã¦ãã¾ãã¨ãã£ããããªå¯è½æ§ãèããããã
ãã®ãããªåé¡ãèµ·ãããªãããã«ã¯ãã¹ãã¬ã¼ã¸ã«ã¦ã¼ã¶ã«ç´ã¥ããã¼ã¿ãä¿åããéã«ã¯ãç¾å¨ã®ã¦ã¼ã¶ãèå¥ããå¤ãåæã«ä¿åãã¦ãããä¿åãããå¤ã使ç¨ããéã«ã¯ã¦ã¼ã¶ãä¸è´ãã¦ãããã¨ã確èªãããã¨ãã対å¿ãä¸å¯æ¬ ã§ããã
// å¤æ° uid ã¯ãã°ã¤ã³ä¸ã®ã¦ã¼ã¶ãèå¥ããå¤ // uid ãç°ãªãå ´åã«ã¯ã¹ãã¬ã¼ã¸ãã¯ãªã¢ if( localStorage.getItem( "uid" ) !== uid ){ localStorage.removeItem( "tweet" ); localStorage.setItem( "uid", uid ); } ... // ãªãã©ã¤ã³æã«ä¿åããã¦ããtweetãæ稿 if( navigator.onLine && text = localStorage.getItem( "tweet" ) ){ post_tweet( text ); // ãµã¼ãã¸éä¿¡ localStorage.removeItem( "tweet" ); } ... // ãªãã©ã¤ã³æã«tweetãä¸æä¿å if( !navigator.onLine ){ localStorage.setItem( "tweet", text ); }
ã¦ã¼ã¶åºæã®å¤ãã¹ãã¬ã¼ã¸ããåé¤ããã®ããã£ãããªãã¨ããå ´åã¯ã(容éããæ°ã«ãªããªãã®ã§ããã°)ã¦ã¼ã¶èå¥åã¨ã¨ãã«ä¿åããã°ããã
// å¤æ° uid ã¯ãã°ã¤ã³ä¸ã®ã¦ã¼ã¶ãèå¥ããå¤ // ãªãã©ã¤ã³æã«ä¿åããã¦ããtweetãæ稿 if( navigator.onLine && text = localStorage.getItem( uid + "-tweet" ) ){ post_tweet( text ); // ãµã¼ãã¸éä¿¡ localStorage.removeItem( uid + "-tweet" ); } ... // ãªãã©ã¤ã³æã«tweetãä¸æä¿å if( !navigator.onLine ){ localStorage.setItem( uid + "-tweet", text ); }
â¦ã¨ãããããªãã¨ããkazuhoãããhidekãããyappoãããtokuhiromããã¨è©±ããã®ã ãã©ãæããã¦ããããã¹ããã©ã¯ãã£ã¹ãªã®ãã©ããªã®ãããããããªããHTML5ã®æ©è½ã«é¢ãã¦ã¯ã表é¢çãªä½¿ãæ¹ã ãã§ããã°ãã¡ãã¡ã«è»¢ãã£ã¦ãããããã®ããã«å°ãçªã£è¾¼ãã 話ã«ãªãã¨ã¾ã ã¾ã è°è«ãå¿ è¦ã¨ããã®ãå人çãªèªèã§ããã
(追è¨)ãã°ã¤ã³æ/ãã°ã¢ã¦ãæã«æ¶ãã¨ããã®ã¯ãæªãã°ã¤ã³ç¶æ ã¨ãã°ã¤ã³ç¶æ ã§ã¹ãã¬ã¼ã¸å 容ã®å ±æãå¿é ããªãã¦ããå ´åãããµã¼ãå´ã®ã¿ã¤ã ã¢ã¦ãã«ãããã°ã¢ã¦ããªã©ãçºçããªãã¨ããã®ã§ããã°ãããã©ãããã¦ããããããã¨ã¯ãªãã¨æãã®ã§ãããããæ¹æ³ã¯åãã«ããã
ç¶ã â Web StorageãindexedDBãæ±ãä¸ã§ã®ã»ãã¥ãªãã£ä¸ã®æ³¨æç¹(ç¶ç·¨) - èã£ã±æ¥è¨