很久沒寫文章了，忙加懶實在沒辦法，之前也看過關於Web Storage的文章，當時就覺得各各瀏覽器的支持跟上來還早着呢，像我們這樣做門戶網站的一時半會兒也用不上，畢竟用戶群體魚目混雜嘛，最近各各瀏覽器頻頻升級，尤其IE轉眼間從ie6、ie7跑到ie11了。
Web Storage呢就跟session和cookie一樣的啦，不過session和cookie大家都知道，今天要說說Web Storage。
Web Storage也有分兩類sessionStorage和localStorage，這兩個差別就跟session和cookie一樣，sessionStorage關閉瀏覽器后過期，localStrage不會過期，但是跟cookie不一樣的是沒有過期時間。
對比session和cookie的優點主要提現在一下三點：
1、容量大，IE8里是10M，不同瀏覽器支持大小不一致。
2、不會隨着回話來傳輸。
3、讀取和寫入方便，有現成的sessionStorage.setItem(key,value),sessionStorage.getItem(key),localStorage.setItem(key,value),localStorage.getItem(key)方法。
Web Storage在各各瀏覽器中的支持情況：
Web Storage使用實例代碼：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>HTML5 Web Storage Demo</title> <script type="text/javascript"> function $(id){ return document.getElementById(id);} function savesessionStorage(id){sessionStorage.setItem('message',$(id).value);} function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");} function savelocalStorage(id){localStorage.setItem("message",$(id).value);} function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");} </script> </head> <body> <div> <h2>sessionStorage Demo</h2> <p id="sessionMsg"></p> <input type="text" id="sessionInput" /> <input type="button" value="保存數據" onclick="savesessionStorage('sessionInput');" /> <input type="button" value="讀取數據" onclick="loadsessionStorage('sessionMsg');" /> <br /> <h2>localStorage Demo</h2> <p id="localMsg"></p> <input type="text" id="localInput" /> <input type="button" value="保存數據" onclick="savelocalStorage('localInput');" /> <input type="button" value="讀取數據" onclick="loadlocalStorage('localMsg');" /> </div> </body> </html>
Web Storage使用實例代碼運行效果：
