localStorage与sessionStorage区别：
浏览器正常模式下：
关闭浏览器或该窗口标签时，localStorage数据依然保存，但是sessionStorage数据会被清除。
浏览器无痕浏览模式下：
关闭窗口标签页，localStorage数据依然保存，但是sessionStorage数据会被清除。
关闭浏览器，localStorage，sessionStorage数据均被清除。
cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
交互打开情况：
在浏览器的正常模式下，再打开正常模式窗口，localStorage数据依然保存，但是sessionStorage数据会被清除。
在浏览器的正常模式下，再打开无痕浏览模式窗口，这时候只要有无痕浏览窗口存在，localStorage就是上次无痕浏览模式下的localStorage，但是sessionStorage依旧被清除。类似在无痕浏览模式下，打开一个新的无痕标签页。否则，就是两者数据都清除。
在浏览器的无痕浏览模式下，再打开正常模式窗口，这时候localStorage是上一次正常模式下的localStorage，但是sessionStorage依旧被清除。类似在正常模式下，打开一个新的正常模式标签页或者重新打开浏览器。
在浏览器的无痕模式下，再打开无痕浏览器窗口，localStorage数据依然保存，但是sessionStorage数据会被清除。
测试代码 demo.html
<!DOCTYPE HTML>
<html>
<body>
<p id="localStorage"></p>
<p id="sessionStorage"></p>
<script>
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1; }else{
localStorage.pagecount=1;
}
if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
sessionStorage.pagecount=1;
}
document.getElementById("localStorage").innerText="调用localStorage："+localStorage.pagecount+"次";
document.getElementById("sessionStorage").innerText="调用sessionStorage："+sessionStorage.pagecount+"次";
</script>
</body>
</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；
