3

これは私の作業サイトを参照しています: []

このリンクは、私の質問に回答すると削除されます:(

ユーザーのカートを保存するためにブラウザのローカル ストレージを使用しています。したがって、アイテムをカートに追加すると、期待どおりにミニ カートが同期されます。

バグを再現する手順は次のとおりです。

  1. 非 SSL ページの下のカートに商品を追加する
  2. カートに移動します。（これはSSLの下にあります）
  3. カートページで数量を 1 増やす
  4. 安全でないページに戻る
  5. ミニカートが正しくないことに注意してください

これは、基本的に 2 つのバージョンのローカル ストレージが存在するために発生します。1 つは SSL の下にあり、もう 1 つは安全でないページの下にあります。安全なページから安全でない localstorage を無効にするにはどうすればよいですか?

要件: カート ページは SSL である必要があります

ありがとう。

4

2 に答える 2

4

HTML5 仕様により、localStorage を HTTP から HTTPS に転送することはできません。

最も簡単な方法は、すべての localStorage を 1 つのドメインに格納することです。元：https://www.example.com

参照: http と https の両方で html5 localstorage を使用する回避策はありますか? 同様の質問について。

于 2013-08-05T17:28:49.173 に答える
0

本番稼働例

私がこれを行った方法は、親に postMessage を行う iframe を使用することでした。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 に答える