sessionStorage,localStorage生命周期
他们两个的区别还是大致知道，包括用法，但是针对生命周期理解的还是不够，于是还是写一发吧，特别是sessionStorage的生命周期
MDN上是这样解释sessionStorage的
sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，这点和 session cookies 的运行方式不同。
其他的博客解释
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
这一段描述的seesionStorage是什么意思呢
就是只有在打开当前页面的sessionStorage是同一个，刷新也是保持在sessionStorage中的，但是只要打开新页面，即使是同一个页面，这个sessionStorage也是不一样的，使用不同的浏览器打开页面sessionStorage也是不一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button class="btn">存储</button>
<script>
function $(ele) {
return document.querySelector(ele);
}
$('.btn').addEventListener('click', function() {
sessionStorage.setItem('usernameyy', 'yy');
localStorage.setItem('usernamexx', 'xx');
});
console.log(sessionStorage.getItem('username'));
</script>
</body>
</html>
点击存储按钮之后会存储sessionStorage和localStorage，但是使用当前浏览器打开新页面或者新窗口查看sessionStorage都是没有的，但是localStorage是有的。这就是他们的生命周期。
sessionStorage 生命周期遇到的问题
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
Window.sessionStorage
网友评论