sessionStorage的过期时间

Question

我正在构建一个表单，需要将数据存储在HTML5的sessionStorage中。我不知道sessionStorage何时过期。有人能告诉我sessionStorage的过期时间吗？

- Jitesh Tukadiya

Answer 1

它随着您的浏览器会话而存在和消失，不在选项卡之间共享。它不会自动过期。因此，如果您从未关闭浏览器，则它永远不会过期。

所以，当选项卡/窗口关闭时，数据就会丢失。

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

正如Christophe在评论中所写，localstorage永不过期。它也可以在选项卡之间共享，并且与sessionstorage相同大小（5MB）。

- Peter Rasmussen

---

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

sessionStorage 在关闭浏览器时并不会过期，可以跨越多个浏览器会话。如果你关闭了浏览器并保存了标签页，或者浏览器崩溃并在重新启动时恢复了标签页，它将被视为同一次会话。请注意这一行：“浏览上下文的生命周期可能与实际用户代理进程的生命周期无关，因为用户代理可能支持在重新启动后恢复会话”。 - Useless Code

如果您刷新页面，sessionStorage也会经受住重载的考验。 - Useless Code

我们可以设置一个时间，在此之后 sessionStorage 将删除特定的键吗？ - vijay shanker

应该称之为tabStorage或windowStorage或其他类似的名称。Session这个词太含糊了。 - Jake Wilson

Answer 2

我知道这个问题很久了，但如果有其他人碰巧发现并发现它有用，我会发布我的答案。你可以通过类似于以下内容来模拟sessionStorage或localStorage的过期时间：

//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并按需进行操作。

希望这对某些人有帮助。

- Culda-Daisa Andrei

---

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

这样的人正在访问客户端代码，是的，对于某些人来说这是安全的，但是如果该人没有有效的令牌，API将会抛出401错误。 - Barungi Stephen

@BarungiStephen 这对用户体验非常有帮助，因为它会让用户知道他们不再拥有活动会话，并且可能需要重新进行身份验证，而不是让用户处于一种悬而未决的状态。 - TheRealChx101

Answer 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))
}

- Marc Bouvier

Answer 4

您可以将过期时间保存在cookie中。在每个页面加载时读取cookie，如果它为空（表示已过期），则清除sessionstorage。

- danan

---

为什么不直接使用sessionStorage呢？只需在特定键中存储创建日期即可。cookie对此没有任何好处-你正在用另一种技术来污染你的网站。 - muzzletov