生产中的工作示例

Question

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

当我的问题得到解答时，此链接将被删除：（

我们使用浏览器本地存储来存储用户购物车。因此，当向购物车添加商品时，通知迷你购物车将保持与您期望的同步。

以下是重现错误的步骤。

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

这种情况正在发生，因为基本上有两个版本的本地存储，1个在SSL下，1个在不安全的页面下。如何使安全页面中的不安全localstorage无效？

要求：我们需要购物车页面在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来源（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 / non 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>');

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

浏览器本地存储和SSL

2 个答案:

生产中的工作示例