最近,我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。
好吧,我不得不承认,我对此并不熟悉。 我的好朋友,你明白了吗?
sesstionStorage可以在多个tab之间共享数据吗?
问题一:“你知道localStorage和sessionStorage有什么区别吗?”
我的朋友:他感到很高兴,因为这是任何前端开发工程师都知道的知识。
localStorage的数据是持久化的,只要我们不主动清除它,它就会一直存在。
关闭选项卡/窗口会结束会话并清除 sessionStorage 中的对象。
问题2:“localStorage可以在同一个网站下共享数据吗?”
我的朋友:“这是另一个简单的! 数据可以在同一网站下的不同选项卡或窗口之间共享”
// 让我们尝试在 window 1 page 1 中设置一个name
localStorage.setItem('name', 'fatfish')
// 我们尝试在window 2 page 2中读取当前name
localStorage.getItem('name') // fatfish
问题三:“你太棒了,我想再考你一个问题,sesstionStorage是否可以在多个tab之间共享数据”
我的朋友:“不,每个窗口或选项卡都有一个单独的 sessionStorage,它们之间没有数据共享”
面试官:“你真的确定是这样吗?”
我朋友:“诶! 我不确定,也许吧!”
也许我的朋友因为这个问题错过了offer,但是作为开发者,我们需要不断的提升自己的知识和技能。
(来自 mdn)只读 sessionStorage 属性访问当前来源的会话存储对象。 sessionStorage 类似于 localStorage; 不同之处在于,localStorage 中的数据不会过期,而 sessionStorage 中的数据会在页面会话结束时被清除。
请注意第三点! 或者我们可以在这里找到答案!
btn.addEventListener('click', () => {
window.sessionStorage.setItem('name', 'fatfish')
window.open('https://mysite.com/page/2')
})
我可以在 https://mysite.com/page/2 获取name的值吗?
console.log(window.sessionStorage.getItem('name')) // null 或者 fatfish?
是的,答案是fatfish。 那么我们确定sesstionStorage可以在多个tab之间共享数据吗?
让我们尝试在 https://mysite.com/page/1 再次继续执行一段代码。
window.sessionStorage.setItem('name', 'medium')
window.sessionStorage.setItem('age', '1000')
如果 sessionStorage 可以在不同的窗口或标签之间共享数据,那么 https://mysite.com/page/2 也可以获取最新的 name 和 age 值
console.log(window.sessionStorage.getItem('name')) // 111
console.log(window.sessionStorage.getItem('age')) // null
所以我们可以得出结论,sessionStorage不能在多个窗口或标签之间共享数据,但是当通过window.open或链接打开新页面时,新页面会复制上一个页面的sessionStorage。
页面更新:2024-06-02
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号