HTML5 会话存储发送到服务器

Question

如果我是对的，会话存储存储在客户端，并且只能通过一个选项卡访问。

如何将存储在会话存储中的信息发送到服务器？我可以使用 cookie，但如果我打开 2 个选项卡，cookie 将被第二个选项卡重写。

谢谢

Answer 1

Storage 对象（localStorage 和 sessionStorage）可从所有打开相同页面的选项卡中获得。

但是（一些评论指出这是不正确的，但这是对文档的误解），当您打开一个新选项卡时，会在内部创建一个新的存储对象。这是第一个的克隆，因此当时的内容是相同的。

它们从那一点被分开处理，但您可以通过在您的代码中收听storage event 来同步它们。

来自http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute：（请注意，规范针对的是实施者）

当通过克隆一个新的顶级浏览上下文创建 现有的浏览上下文，新的浏览上下文必须以 与原始相同的会话存储区域，但两组必须 从那时起被认为是分开的，不会相互影响 反正。 [...] 当 setItem()、removeItem() 和 clear() 方法 在与会话关联的存储对象 x 上调用 存储区 [...]，然后对于每个 Document 对象，其 Window 对象的 sessionStorage 属性的 Storage 对象与 同一个存储区，除了x，发送存储通知。

也就是说，当在活动选项卡中修改存储时，storage 事件会发送到所有其他选项卡（对于同一来源） - 但不是活动选项卡，当然不需要这是正在修改的。

使用event 读取key 和newValue 字段以更新当前非活动 选项卡中的localSession（还有oldValue 在事件）。 storageArea 包含受影响的存储对象（如果您同时使用本地存储和会话存储，则很有用）。

至于“一个域” - 是的，相同的数据只能用于相同的来源（方案、域和端口）。

将数据发送到服务器是完全可能的。 Storage 中存储的所有内容（会话和本地）都存储为字符串。我建议对它进行编码（JSON 是 不是 必要的，因为它已经存储为字符串）。使用 f.ex：

var dataForServer = encodeURIComponent(sessionStorage.getItem(myKey));

然后将其作为表单、url 或 ajax 的一部分发送。

Answer 2

sessionStorage 可用于 1 个域，而不是 1 个选项卡。因此，您可以在一个选项卡中的页面上设置信息，然后您可以在第二个选项卡中读出它。 对不起，我以为它是这样工作的。但事实并非如此，您需要 localStorage 或 cookie 才能使其工作。

因此将其存储在 cookie 中是一个可行的选择，但如果您这样做，为什么还要使用 sessionStorage？

您也可以通过 Ajax 将 sessionStorage 的内容发送到服务器，（尽管您必须将数据转换为 json，因为您只能发送字符串）

但如果你还是在服务器上保存信息，你为什么要使用 sessionStorage？ localStorage 和 sessionStorage 的全部意义在于保存服务器不必知道的用户特定信息。