Existe-t-il une solution de contournement pour utiliser html5 localstorage sur http et https?

J'ai besoin de stocker des données côté client, et que ces données est trop grande pour stocker dans un cookie. LocalStorage semblait le moyen idéal de le faire, mais le truc, c'est que le site que je vais utiliser ce a certaines parties que le travail sur https et d'autres avec juste le http et le local de stockage ne peut pas accéder aux données à partir https que vous définissez avec http cela ne semble pas être une solution viable plus.

Aucune idée si il existe une solution à cela? D'autres alternatives?

source d'informationauteur daniels | 2012-05-08

  1. 21

    Stocker toutes les données sur un domaine, par exemple https://my.domain.org/.

    • Sur https protocoles, il suffit d'utiliser localStorage.setItem('key', 'value') pour enregistrer les données.
    • Sur http protocoles, intégrer un https cadre, et l'utilisation postMessage pour enregistrer les données:

    Démo: http://jsfiddle.net/gK7ce/4/ (avec l'aide de la page située à 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);

    Sur le site http(s) de la page, le cadre peut être incorporé comme suit (remplacer https://my.mydomain.com avec l'URL réelle. Notez que vous pouvez tout simplement obtenir une référence à l'image et utiliser la src attribut):

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

    Noter que la méthode est asynchrone, en raison de postMessage. Une mise en œuvre de la getItem méthode doit être mis en œuvre différemment:

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

    Noter que chaque rappel est stockée dans une table de hachage. Chaque message contient également un identifiant, de sorte que la fenêtre qui reçoit le message appelle le correspondant de rappel.

    Pour être complet, voici la LSremoveItem méthode:

    function LSremoveItem(key) {
    var obj = {
        removeItem: key
    };
    frames['myPostMessage'].postMessage(JSON.stringify(obj), 'https://my.domain.com');
}