localStorage与sessionStorage区别

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>