多tab的sessionStorage数据共享问题

Posted 2023-04-07

参考技术A 很多同学可能并没有关注过这样一个问题：sessionStorage 的数据会在同一网站的多个标签页之间能共享吗？

首先我们都知道sessionStorage数据的有效期是会话内，当页面会话结束时，存储在sessionStorage中的数据将被清除。基于以上这个情况，我们就要判断一下，访问同一个网站页面的不同的tab是是否属于同一个会话？这个其实跟由打开tab的方式决定

sessionStorage 过期

【中文标题】sessionStorage 过期

【英文标题】：Expiration of sessionStorage

【发布时间】：2013-02-16 18:42:14

【问题描述】：

我正在构建一个表单，我必须将数据存储在 HTML5 的 sessionStorage 中，我不知道 sessionStorage 何时到期。谁能告诉我sessionStorage的过期时间？

【参考方案1】：

它与您的浏览器会话有关，并且不会在选项卡之间共享。它不会自动过期。因此，如果您从不关闭浏览器，它就永远不会过期。

所以当标签页/窗口关闭时，数据就会丢失。

每个 sessionstorage 区域允许 5MB 的存储空间（在某些浏览器中为 10MB）。而 cookies 只允许 4kb（在某些浏览器中甚至更多）。然而，Cookie 有一个设定的到期日期。

正如Christophe 在 cmets 中所写，localstorage 永不过期。它还可以跨选项卡共享，并且与会话存储 (5MB) 大小相同。

【讨论】：

请注意，与 sessionStorage 不同，localStorage 在关闭浏览器时不会过期。

sessionStorage 实际上不会在您关闭浏览器时过期，它可以跨越浏览器会话。如果您关闭浏览器并保存选项卡，或者浏览器崩溃并在重新启动时恢复选项卡，it counts as the same session 请注意 行，浏览上下文的生命周期可能与实际用户代理进程的生命周期无关本身，因为用户代理可能支持重启后恢复会话。

如果您刷新页面，

sessionStorage 也会survive a reload。

我们可以设置 sessionStorage 删除特定键的时间吗？

应该叫tabStorage或者windowStorage什么的。会话是一个非常模糊的术语。

【参考方案2】：

您可以在 cookie 中保存过期时间。 在每个页面加载读取cookie，如果它是空的（意味着过期）然后清除会话存储。

【参考方案3】：

你可以添加一些类似这样的过期机制：

// get from session (if the value expired it is destroyed)
function sessionGet(key) 
  let stringValue = window.sessionStorage.getItem(key)
    if (stringValue !== null) 
      let value = JSON.parse(stringValue)
        let expirationDate = new Date(value.expirationDate)
        if (expirationDate > new Date()) 
          return value.value
         else 
          window.sessionStorage.removeItem(key)
        
    
    return null


// add into session
function sessionSet(key, value, expirationInMin = 10) 
  let expirationDate = new Date(new Date().getTime() + (60000 * expirationInMin))
    let newValue = 
    value: value,
    expirationDate: expirationDate.toISOString()
  
  window.sessionStorage.setItem(key, JSON.stringify(newValue))

【参考方案4】：

我知道这个问题已经很老了，但如果其他人偶然发现这个问题并觉得它有帮助，我会发布我的答案。您几乎可以使用以下方式模拟 sessionStorage 或 locaStorage 到期：

//In your login logic or whatever
var expires = new Date(year, month, day, hours, minutes, seconds, milliseconds);
var sessionObject = 
    expiresAt: expires,
    someOtherSessionData: 
        username: ''
    

sessionStorage.setItem('sessionObject', JSON.stringify(sessionObject));

如果您不希望此会话对象清晰可见，也可以使用 http://bitwiseshiftleft.github.io/sjcl/ 之类的方式加密此对象。

在每次页面加载时，您都可以检查sessionStorage 或localStorage 是否已过期：

$(document).ready(function()
    var currentDate = new Date();
    var sessionObject = JSON.parse(sessionStorage.getItem('sessionObject'));
    var expirationDate = sessionObject.expiresAt;
    if(Date.parse(currentDate) < Date.parse(expirationDate)) 
        //normal application behaviour => session is not expired
        var someAppVariable = sessionObject.someOtherSessionData.etc;
     else 
        //redirect users to login page or whatever logic you have in your app 
        //and remove the sessionStorage because it will be set again by previous logic
        sessionStorage.removeItem('sessionObject');
        console.log('session expired');
    
);

如果您不希望用户在标签页或浏览器关闭后保持登录状态，请使用 sessionStorage，否则您应该使用 localStorage 并根据需要进行操作。

我希望有人会觉得这很有帮助。

【讨论】：

这对我来说听起来像是一个登录漏洞。如果有人打开开发者工具，修改日期，他们就可以访问。

这样的人正在访问客户端代码，是的，这对某人来说是安全的，但鉴于此人没有有效的令牌，api 仍然会抛出 401