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

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

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

以下是重现错误的步骤 .

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

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

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

谢谢 .

2 回答

4

根据HTML5规范，localStorage无法从HTTP传输到HTTPS .

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

有关类似问题，请参阅：Is there any workaround to make use of html5 localstorage on both http and https? .

回复于 2024-04-30T13:42:10+08:00

生产环境中的工作示例

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

ssl iframe source (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 parent source:

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>');

将目标原点放置到正确的协议可确保您不会向错误的协议发送消息 .

回复于 2024-04-30T13:42:10+08:00

浏览器本地存储和SSL

2 回答

生产环境 中的工作示例

相关问题

生产环境中的工作示例