html5 - sessionstorage过期时间 - 前端session




localStorage,sessionStorage,session和cookies有什么区别? (4)

  1. LocalStorage

    优点

    1. Web存储可以简单地看作是对cookie的改进,提供更大的存储容量。 如果您查看Mozilla源代码,我们可以看到5120KB5MB ,相当于Chrome上的250万个字符 )是整个域的默认存储大小。 与典型的4KB Cookie相比,这样可以为您提供更多的空间。
    2. 数据不会发送回每个HTTP请求(HTML,图像,JavaScript,CSS等)的服务器 - 减少客户端和服务器之间的通信量。
    3. 存储在localStorage中的数据会一直存在,直到被明确删除。 所做的更改已保存并可用于当前和未来对该网站的所有访问。

    缺点

    1. 它适用于同源策略 。 所以,存储的数据只能在相同的原点上使用。
  2. Cookies

    优点:

    1. 与其他人相比,没有什么是AFAIK。

    缺点:

    1. 4K限制适用于整个cookie,包括名称,值,到期日期等。为了支持大多数浏览器,请将名称保留在4000字节以下,并将整体Cookie大小保持在4093字节以下。
    2. 数据每发送一次HTTP请求(HTML,图像,JavaScript,CSS等)都会发送回服务器 - 增加客户端和服务器之间的流量。

      通常,允许以下内容:

      • 300个饼干
      • 每个cookie有4096个字节
      • 每个域名20个Cookie
      • 每域81920字节 (给定20个最大大小4096 = 81920字节的cookie)。
  3. sessionStorage

    优点:

    1. 它与localStorage类似。
    2. 数据不是持久的,即数据只能在每个窗口中使用(或者Chrome或Firefox等浏览器中的标签)。 数据仅在页面会话期间可用。 所做的更改将保存并可用于当前页面,以及将来在同一窗口中访问该网站。 窗口关闭后,存储被删除。

    缺点:

    1. 数据仅在设置它的窗口/选项卡内可用。
    2. localStorage一样,tt也适用于同源策略 。 所以,存储的数据只能在相同的原点上使用。

localStorage,sessionStorage,session和cookies的技术优点和缺点是什么?我什么时候可以使用它们?


Web Storage API提供了一些机制,通过这些机制,浏览器可以以比使用cookie更直观的方式安全地存储键/值对。 Web存储API使用两个新属性 - Window.sessionStorageWindow.localStorage扩展Window对象。 - 调用其中的一个将创建一个Storage对象的实例,通过它可以设置,检索和删除数据项。 对于每个来源(域), sessionStoragelocalStorage使用不同的Storage对象。

存储对象是简单的键值存储,与对象相似, 但它们在页面加载时保持不变

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

键和值总是字符串 。 存储任何类型convert it to String ,然后将其存储。 总是建议使用Storage interface方法。

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));

Web存储中的两种机制如下:

  • sessionStorage为每个给定的来源维护一个单独的存储区域在页面会话期间可用的同源策略 (只要浏览器处于打开状态,包括页面重新加载和恢复)。
  • LocalStorage做同样的事情,但即使浏览器关闭并重新打开时仍然存在。

Storage « 本地存储器将数据写入磁盘,而会话存储器只将数据写入存储器。 写入会话存储的任何数据都会在您的应用退出时清除。

每个浏览器可用最大存储空间不同 ,但大多数浏览器至少实现了w3c推荐的最大存储空间限制5MB

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

始终抓住LocalStorage安全性和配额超过错误

StorageEvent «当存储区域更改时,存储事件在文档的Window对象上触发。 当用户代理发送文档的存储通知时,用户代理必须对任务进行排队,以使用StorageEvent在Document对象的Window对象上触发名为storage的事件。

注意:有关真实世界的示例,请参阅Web存储演示查看源代码

收听dom / Window上的存储事件以捕获存储器中的更改。 fiddle

Cookies (网络cookie,浏览器cookie) Cookies是数据,在您的计算机上以小型文本文件存储为名称/值对。

使用Document.cookie JavaScript访问

新的cookie也可以使用Document.cookie属性通过JavaScript创建,如果HttpOnly标志没有设置,现有的cookie也可以通过JavaScript访问。

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

安全和HttpOnly Cookie HTTP状态管理机制

Cookie通常用于Web应用程序中以识别用户及其已验证的会话

当收到一个HTTP请求时,服务器可以发送带响应的Set-Cookie头。 Cookie通常由浏览器存储,然后将cookie发送到Cookie HTTP标头中的同一服务器。

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

会话cookie将在客户端关闭时被删除。 他们没有指定Expires或Max-Age指令。

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

永久性Cookie在特定日期(过期)或特定时间长度(Max-Age)后过期。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Cookie HTTP请求标头包含以前由服务器使用Set-Cookie标头发送的存储的HTTP Cookie。 无法通过Document.cookie属性,XMLHttpRequest和Request API访问仅HTTP cookie,以缓解对跨站点脚本攻击(XSS)的攻击。

Cookies主要用于三个目的:

  • 会话管理 «登录,购物车,游戏分数或服务器应记住的任何其他内容
  • 个性化 «用户偏好,主题和其他设置
  • 跟踪 (记录和分析用户行为)“Cookie有一个与他们相关的域名。 如果此网域与您所在网页的网域相同,则说这些Cookie为第一方Cookie。 如果域名不同,则说它是第三方cookie。 尽管第一方cookie仅发送到设置它们的服务器,但网页可能包含存储在其他域(如广告条)中的服务器上的图像或其他组件。 通过这些第三方组件发送的Cookie称为第三方Cookie,主要用于在整个网络上进行广告和跟踪。

发明饼干来解决“如何记住用户信息”的问题:

  • 当用户访问网页时,他的名字可以存储在cookie中。
  • 用户下一次访问该页面时,属于该页面的Cookie将被添加到该请求中。 这样服务器就获得必要的数据来“记住”有关用户的信息。

GitHubGist Example

综上所述,

  • localStorage持续存在于不同的标签或窗口中,即使我们关闭了浏览器,相应的域安全策略和用户选择关于配额限制。
  • 如果我们关闭选项卡(顶级浏览上下文),sessionStorage对象不会持续存在,因为如果我们通过另一个选项卡或窗口进行浏览,它不存在。
  • Web存储(会话,本地)允许我们保存大量的键/值对和大量文本,这是通过cookie无法做到的。
  • 用于敏感操作的Cookie只应具有较短的使用期限。
  • Cookie主要用于在整个网络上进行广告和跟踪。 请参阅Google使用的Cookie类型
  • Cookies随每个请求一起发送,因此可能会恶化性能(特别是对于移动数据连接)。 用于客户端存储的现代API是Web存储API(localStorage和sessionStorage)和IndexedDB。

这些是JavaScript中'window'对象的属性,就像文档是保存DOM对象的窗口对象的属性之一一样。

会话存储属性为页面会话期间可用的每个给定来源维护一个单独的存储区域,即只要浏览器处于打开状态(包括页面重新载入和还原)。

本地存储器执行同样的操作,但即使浏览器关闭并重新打开时仍然存在。

您可以按如下方式设置和检索存储的数据:

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

同样对于localStorage。


这是一个非常广泛的范围问题,很多利弊将会与情况相关。

在任何情况下,这些存储机制都将针对单个计算机/设备上的单独浏览器。 在会话中持续存储数据的任何要求都需要涉及应用服务器端 - 很可能使用数据库,但可能使用XML或文本/ CSV文件。

localStorage,sessionStorage和cookie都是客户端存储解决方案。 会话数据保存在您直接控制的服务器上。

localStorage和sessionStorage

localStorage和sessionStorage是相对较新的API(意味着并非所有的传统浏览器都支持它们),并且除了持久性之外,它们几乎完全相同(都在API和功能中)。 sessionStorage(顾名思义)仅在浏览器会话期间可用(并且在关闭选项卡或窗口时被删除) - 但它在页面重新加载(源DOM存储指南 - Mozilla开发者网络 )中仍然存在。

显然,如果您正在存储的数据需要持续存在,那么localStorage比sessionStorage更可取 - 尽管您应该注意到两者都可以被用户清除,因此无论在哪种情况下都不应依赖数据的持续存在。

localStorage和sessionStorage非常适合在页面之间保持客户端脚本所需的非敏感数据(例如:偏好,游戏中的分数)。 存储在localStorage和sessionStorage中的数据可以很容易地从客户端/浏览器中读取或更改,因此不应该依赖于应用程序中敏感或安全相关数据的存储。

饼干

对于cookies也是如此,这些可以被用户轻易地篡改,并且数据也可以以纯文本的形式从它们读取 - 所以如果您想存储敏感数据,那么会话实际上是您唯一的选择。 如果您不使用SSL,cookie信息也可以在传输过程中截取,尤其是在开放的wifi上。

积极的一面是,Cookie可以通过设置一个仅限HTTP的标志来防范安全风险,如跨站脚本(XSS)/脚本注入,这意味着现代(支持)浏览器将阻止访问来自JavaScript的cookie和值这也会阻止你自己的,合法的JavaScript访问它们)。 这对于用于存储包含登录用户详细信息的令牌的验证cookie特别重要 - 如果您拥有该cookie的副本,那么对于所有意图和目的,只要Web应用程序是有关,并且对用户具有的数据和功能具有相同的访问权限。

由于Cookie用于认证目的和用户数据的持久性,因此对于页面有效的所有 cookie都会从浏览器发送到服务器,以获得对同一域的每个请求 - 这包括原始页面请求,任何后续Ajax请求,所有图像,样式表,脚本和字体。 基于这个原因,Cookie不应该被用来存储大量的信息。 浏览器也可能会限制可以存储在cookie中的信息的大小。 Cookie通常用于存储用于身份验证,会话和广告跟踪的标识令牌。 令牌通常不是人类可读的信息本身,而是加密的标识符链接到您的应用程序或数据库。

localStorage vs. sessionStorage vs. Cookies

在功能方面,cookies,sessionStorage和localStorage只允许你存储字符串 - 可以在设置时隐式地转换原始值(这些需要在读取后需要转换回使用它们的类型),而不是对象或数组(可以让JSON将它们序列化以使用API​​存储它们)。 会话存储通常允许您存储服务器端语言/框架支持的任何原语或对象。

客户端与服务器端

由于HTTP是无状态协议 - Web应用程序无法在返回到网站时识别以前访问过的用户 - 会话数据通常依赖于Cookie令牌来标识用户重复访问(尽管很少使用URL参数相同的目的)。 数据通常会有一个滑动到期时间(每次用户访问都会更新),并且根据您的服务器/框架数据将存储在进程中(意味着如果Web服务器崩溃或重新启动,数据将丢失)或外部状态服务器或数据库。 当使用网络农场(给定网站使用多台服务器)时,这也是必要的。

由于会话数据完全由应用程序(服务器端)控制,因此它是本质上敏感或安全的最佳位置。

服务器端数据的明显缺点是可扩展性 - 每个用户在会话期间都需要服务器资源,并且每个请求都必须发送需要客户端的任何数据。 由于服务器无法知道用户是否导航到其他站点或关闭浏览器,因此会话数据必须在给定时间后过期,以避免所有服务器资源被放弃的会话占用。 因此,在使用会话数据时,您应该意识到数据可能已过期并丢失的可能性,尤其是在长表单的页面上。 如果用户删除了Cookie或切换浏览器/设备,它也会丢失。

某些Web框架/开发人员使用隐藏的HTML输入将数据从表单的一个页面保存到另一个页面,以避免会话过期。

localStorage,sessionStorage和cookie都受到“相同来源”规则的约束,这意味着浏览器应阻止访问数据,除了从设置信息的域开始。

有关客户端存储技术的更多信息,请参阅Dive Into Html 5





session-storage