localStorage與sessionStorage區別：
瀏覽器正常模式下：
關閉瀏覽器或該窗口標簽時，localStorage數據依然保存，但是sessionStorage數據會被清除。
瀏覽器無痕瀏覽模式下：
關閉窗口標簽頁，localStorage數據依然保存，但是sessionStorage數據會被清除。
關閉瀏覽器，localStorage，sessionStorage數據均被清除。
cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
交互打開情況：
在瀏覽器的正常模式下，再打開正常模式窗口，localStorage數據依然保存，但是sessionStorage數據會被清除。
在瀏覽器的正常模式下，再打開無痕瀏覽模式窗口，這時候只要有無痕瀏覽窗口存在，localStorage就是上次無痕瀏覽模式下的localStorage，但是sessionStorage依舊被清除。類似在無痕瀏覽模式下，打開一個新的無痕標簽頁。否則，就是兩者數據都清除。
在瀏覽器的無痕瀏覽模式下，再打開正常模式窗口，這時候localStorage是上一次正常模式下的localStorage，但是sessionStorage依舊被清除。類似在正常模式下，打開一個新的正常模式標簽頁或者重新打開瀏覽器。
在瀏覽器的無痕模式下，再打開無痕瀏覽器窗口，localStorage數據依然保存，但是sessionStorage數據會被清除。
測試代碼 demo.html
1 <!DOCTYPE HTML> 2 <html> 3 <body> 4 <p id="localStorage"></p> 5 <p id="sessionStorage"></p> 6 <script> 7 if (localStorage.pagecount){ 8 localStorage.pagecount=Number(localStorage.pagecount) +1; 9 10 }else{ 11 localStorage.pagecount=1; 12 } 13 if (sessionStorage.pagecount){ 14 sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; 15 }else{ 16 sessionStorage.pagecount=1; 17 } 18 document.getElementById("localStorage").innerText="調用localStorage："+localStorage.pagecount+"次"; 19 document.getElementById("sessionStorage").innerText="調用sessionStorage："+sessionStorage.pagecount+"次"; 20 </script> 21 </body> 22 </html>
先清除瀏覽器之前的瀏覽數據
以google瀏覽器為例：
- 打開demo.html,會發現localStorage與sessionStorage均為1；
- 打開一個空標簽頁，關閉demo.html標簽頁，重新打開demo.html，localStorage為2，sessionStorage為1；
- 關閉瀏覽器，再次打開demo.html，localStorage為3，sessionStorage為1；
- 刷新當前標簽頁，localStorage為4，sessionStorage為2；
- 打開隱身窗口，打開demo.html，localStorage與sessionStorage均為1；
- 在隱身窗口下，打開一個空標簽頁，關閉demo.html標簽頁，重新打開demo.html，localStorage為2，sessionStorage為1；
- 關閉隱身窗口，再次用隱身窗口打開demo.html，localStorage與sessionStorage均為1；
- 在隱身窗口下，刷新當前標簽頁，localStorage與sessionStorage均為2；
- 在當前隱身窗口打開正常窗口，打開demo.html，localStorage為5，sessionStorage為1；
- 在當前正常窗口打開隱身窗口，打開demo.html，localStorage為3，sessionStorage為1；