14

クライアント側にデータを保存する必要がありますが、このデータは大きすぎて Cookie に保存できません。LocalStorage はこれを行うのに最適な方法のように思えましたが、これを使用する Web サイトには、https で動作する部分と http だけで動作する部分があり、ローカルストレージは http で設定した https からのデータにアクセスできないためです。これはもはや実行可能な解決策のようには見えません。

これに対する解決策があるかどうか、何か考えはありますか? 他の選択肢はありますか？

4

1 に答える 1

23

すべてのデータを1つのドメインに保存しますhttps://my.domain.org/。

  • プロトコルhttpsでは、単にlocalStorage.setItem('key', 'value')データを保存するために使用します。
  • プロトコルでは、フレームをhttp埋め込み、データの保存に使用します。httpspostMessage

デモ： http： //jsfiddle.net/gK7ce/4/（ヘルパーページはhttp://jsfiddle.net/gK7ce/3/にあります）。

// Script at https://my.domain.org/postMessage
window.addEventListener('message', function(event) {
    // Domain restriction (to not leak variables to any page..)
    if (event.origin == 'http://my.domain.org' ||
        event.origin == 'https://my.domain.org') {
        var data = JSON.parse(event.data);
        if ('setItem' in data) {
            localStorage.setItem(data.setItem, data.value);
        } else if ('getItem' in data) {
            var gotItem = localStorage.getItem(data.getItem);
            // See below
            event.source.postMessage(
                '#localStorage#' + data.identifier + 
                (gotItem === null ? 'null#' : '#' + gotItem),
                event.origin
            );
        } else if ('removeItem' in data) {
            localStorage.removeItem(data.removeItem);
        }
    }
}, false);

http（s）ページでは、フレームを次のように埋め込むことができます（実際のURLに置き換えhttps://my.mydomain.comsrcます。フレームへの参照を取得し、属性を使用するだけでよいことに注意してください）。

<iframe name="myPostMessage" src="https://my.domain.org/postMessage" style="display:none;"></iframe>
// Example: Set the data
function LSsetItem(key, value) {
    var obj = {
        setItem: key,
        value: value
    };
    frames['myPostMessage'].postMessage(JSON.stringify(obj), 'https://my.domain.com');
}
LSsetItem('key', 'value');

のため、メソッドは非同期であることに注意してくださいpostMessage。メソッドの実装は、getItem別の方法で実装する必要があります。

var callbacks = {};
window.addEventListener('message', function(event) {
    if (event.source === frames['myPostMessage']) {
        var data = /^#localStorage#(\d+)(null)?#([\S\s]*)/.exec(event.data);
        if (data) {
            if (callbacks[data[1]]) {
                // null and "null" are distinguished by our pattern
                callbacks[data[1]](data[2] === 'null' ? null : data[3]);
            }
            delete callbacks[data[1]];
        }
    }
}, false);
function LSgetItem(key, callback) {
    var identifier = new Date().getTime();
    var obj = {
        identifier: identifier,
        getItem: key
    };
    callbacks[identifier] = callback;
    frames['myPostMessage'].postMessage(JSON.stringify(obj), 'https://my.domain.com');
}
// Usage:
LSgetItem('key', function(value) {
    console.log('Value: ' + value);
});

各コールバックはハッシュに格納されることに注意してください。各メッセージには識別子も含まれているため、メッセージを受信するウィンドウは対応する正しいコールバックを呼び出します。

完全を期すために、次のLSremoveItem方法があります。

function LSremoveItem(key) {
    var obj = {
        removeItem: key
    };
    frames['myPostMessage'].postMessage(JSON.stringify(obj), 'https://my.domain.com');
}
于 2012-05-08T20:21:48.490 に答える