浏览器本地存储和SSL

Question

这是指我的工作地点：[]

当我的问题被回答时，这个链接将被删除：

我们使用浏览器本地存储存储用户购物车。因此，当向购物车添加一个项目时，请注意，迷你购物车将如您所期望的那样保持同步。

下面是重现bug的步骤。

1. 在非SSL页下将项添加到购物车
2. 导航到手推车。(在SSL下)
3. 在购物车页上增加1的数量
4. 导航回不安全的页面
5. 请注意，微型艺术是不正确的。

之所以会出现这种情况，是因为本地存储实际上有两个版本，一个在SSL下，一个在不安全的页面下。如何使不安全的本地存储从安全页面失效？

要求:我们需要购物车页在SSL下。

谢谢。

Answer 1

根据HTML5规范，localStorage不能从HTTP传输到HTTPS。

最简单的方法是将所有localStorage存储在一个域上。例：https://www.example.com

类似的问题见：Is there any workaround to make use of html5 localstorage on both http and https?。

Answer 2

生产中的工作实例

我这样做的方式是使用一个iframe对它的父程序执行postMessage。iframe总是在https上，但是父文件可以是http，也可以是https。这个解决方案假设修改只在SSL上，并且为非SSL同步它，但是您可以将它调整为将修改发送给两种方式，这样，非ssl父节点就会将更改发送到ssl子节点。

ssl iframe源(存储-sync.html)：

if (sessionStorage.cart)
  try {
    var obj = { cart: JSON.parse(sessionStorage.cart) };
    parent.postMessage(JSON.stringify(obj), 'http://yourdomain.com');
  } catch(ex) {
    console.log(ex);
  }

ssl /非ssl父源：

window.addEventListener('message', function(ev) {
  if (ev.origin !== 'https://yourdomain.com')
    return;
  try {
    var obj = JSON.parse(ev.data);
    sessionStorage.cart = JSON.stringify(obj.cart);
    cart.reload();
  } catch(ex) {};
});

$('body').append('<iframe style="display:none" src="https://yourdomain.com/storage-sync.html?r=' + Math.random() + '"></iframe>');

将目标源放置在正确的协议中，可以确保您不会向错误的协议发送消息。