3

这是参考我的工作地点：[]

回答我的问题后，此链接将被删除:(

我们正在使用浏览器本地存储来存储用户购物车。因此，在将商品添加到购物车时，请注意迷你购物车将按照您的预期保持同步。

以下是重现该错误的步骤。

  1. 在非 SSL 页面下将商品添加到购物车
  2. 导航到购物车。（在 SSL 下）
  3. 在购物车页面上将数量增加 1
  4. 导航回不安全的页面
  5. 注意迷你车不正确

之所以发生这种情况，是因为本质上存在两个版本的本地存储，一个在 SSL 下，一个在不安全页面下。如何使安全页面中的不安全本地存储失效？

要求：我们需要购物车页面在 SSL 下

谢谢。

4

2 回答 2

4

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

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

请参阅：是否有任何解决方法可以在 http 和 https 上使用 html5 本地存储？对于类似的问题。

于 2013-08-05T17:28:49.173 回答
0

生产中的工作示例

我这样做的方法是使用一个 iframe 对其父级执行 postMessage。iframe 始终在 https 上，但父级可以是 http 或 https。此解决方案假定修改仅在 SSL 上存储到存储并将其同步回非 SSL，但您可以调整它以双向发送修改，以便非 ssl 父级将更改向下发送到 ssl 子级。

ssl iframe 源 (storage-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>');

将目标来源放置到正确的协议可确保您不会将消息发送到错误的协议。

于 2015-12-17T19:14:37.547 回答