Visualizzazione dei risultati da 1 a 10 su 10

Discussione: Web storage di HTML5

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    130

    Web storage di HTML5

    Salve a tutti... Premetto che ho letto un pò di guide in internet ma non ci ho capito gran che... Attualmente conosco HTML e CSS .
    Sto cercando un pò di aiuto per fare una cosa che a quanto pare non è molto discussa... e magari può venir utile a molti ovvero sfruttare il web storage di HTML5.

    In pratica io vorrei farmi 3 o 4 paginette che gireranno in locale e chiamiamole:
    index.html, impostazioni.html, pagina1.html, pagina2.html

    Io vorrei andare nella pagina "impostazioni.html" in cui ci sono 3 pulsanti ( chiamati skin1, skin2, skin3) e che in base al pulsante premuto, mi cambia lo sfondo e magari le icone delle 4 pagine... In pratica vorrei cambiare lo skin del sito ma che questo mi restasse anche in memoria se chiudo e poi ( magari dopo 3 giorni) riapro la pagina... Mi han detto che si può fare con appunto il web storage di HTML ma non ho idea di come fare ne tantomeno da come iniziare... Mi date una mano per cortesia? E' una cosa che vorrei fare da tempo per mio sfizio personale. O sapete se esiste una soluzione diversa ma già fatta? grazie ancora

  2. #2
    Utente di HTML.it L'avatar di kuarl
    Registrato dal
    Oct 2001
    Messaggi
    1,093
    e` una cosa che risolvi facilmente con i cookie, senza scomodare database:
    http://www.w3schools.com/js/js_cookies.asp

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    130
    Quote Originariamente inviata da kuarl Visualizza il messaggio
    e` una cosa che risolvi facilmente con i cookie, senza scomodare database:
    http://www.w3schools.com/js/js_cookies.asp
    ehm... si giusto... però dovrei scomodare javascript che appunto non conosco... Ho guardato la pagina del tuo link con tanto di esempio da scrivere il proprio nome e vedo che farebbe proprio al caso mio...

    Quindi in teoria mi servirebbe uno script che, al posto di memorizzare il nome, memorizzi il percorso del css da pescare per creare il layout... giusto?

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2010
    residenza
    Pianeta Terra
    Messaggi
    1,614
    Se non conosci js, puoi sempre usare un linguaggio server side, tipo php. Secondo la mia modesta opinione è più semplice e solida settare un cookie lato server.

    Se ti va fare l'esperimento, puoi scaricarti un server locale da qui e lo fai in php.
    Una volta fatto l'installazione, troverai una cartella in C:/wamp/www dove metti il tuo sito.
    Rinomini l'estensione delle pagine in php e lo fai con quello.

    In ogni caso devi scegliere tra js o linguaggio server side.

    Se lo vuoi fare con jQuery (sempre javascript è) QUI hai una guida che fa proprio per te, ovvero che cambia il foglio di stile o simile.
    Li però ti serve la libreria jQuery ed il cookie plugin a quanto ho capito.
    Per una bella risata vai QUI

  5. #5
    Da qualche parte avevo letto qualcosa riguardo all'abolizione dei cookie dai browser nel prossimo futuro, ma non ricordo più esattamente cos'era. Qualcuno conferma?

  6. #6
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    130
    Conoscendo HTML e CSS e basta tralascio discorso PHP...Avevo visto anch'io il plugin jquery e stavo valutando proprio di usare proprio questa soluzione... l'unico mio blocco è che non mi cambia lo stile a tutte le pagine che voglio ma dovrei per ognuna inserire lo script e richiamare il plugin nell'head... Secondo voi questa soluzione appesantisce molto il tutto?

  7. #7
    Utente di HTML.it L'avatar di kuarl
    Registrato dal
    Oct 2001
    Messaggi
    1,093
    Quote Originariamente inviata da sifting Visualizza il messaggio
    ehm... si giusto... però dovrei scomodare javascript che appunto non conosco... Ho guardato la pagina del tuo link con tanto di esempio da scrivere il proprio nome e vedo che farebbe proprio al caso mio...

    Quindi in teoria mi servirebbe uno script che, al posto di memorizzare il nome, memorizzi il percorso del css da pescare per creare il layout... giusto?
    esatto. In ogni caso ti serve javascript anche per i web storage, che sono molto più complessi.

  8. #8
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    130
    Quote Originariamente inviata da kuarl Visualizza il messaggio
    esatto. In ogni caso ti serve javascript anche per i web storage, che sono molto più complessi.
    Ok... tramite jquery avrei ottenuto il risultato voluto...

    All'interno della pagina setting nell'head ho richiamato gli script necessari ( cookies.js e scripts.js),
    con i segueni codici:
    cookies.js:

    codice:
    jQuery.cookie = function(name, value, options) {
        if (typeof value != 'undefined') { // name and value given, set cookie
            options = options || {};
            if (value === null) {
                value = '';
                options.expires = -1;
            }
            var expires = '';
            if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
                var date;
                if (typeof options.expires == 'number') {
                    date = new Date();
                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
                } else {
                    date = options.expires;
                }
                expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
            }
            // CAUTION: Needed to parenthesize options.path and options.domain
            // in the following expressions, otherwise they evaluate to undefined
            // in the packed version for some reason...
            var path = options.path ? '; path=' + (options.path) : '';
            var domain = options.domain ? '; domain=' + (options.domain) : '';
            var secure = options.secure ? '; secure' : '';
            document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
        } else { // only name given, get cookie
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    };
    e scripts.js:

    codice:
    function swapcss() {
        $("#nav li a").click(function() { 
            $("link").attr("href",$(this).attr('rel'));
            $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
            return false;
        });
        }

    prima della chiusura del body ho inserito lo script:

    codice:
    <script type="text/javascript">
    
    if($.cookie("css")) {
        $("link").attr("href",$.cookie("css"));
    }
    $(document).ready(function(){
        swapcss();
        });
    </script>
    sempre nella pagina ho un "menù" con i due link per i due CSS ovvero:

    codice:
        <div id="changestyle">        <ul id="nav">
                <li><a href="#" rel="style/stile1.css">STILE1</a></li>
                <li><a href="#" rel="style/stile2.css">STILE2</a></li>
            </ul>
    e tutto funziona...
    Unico problema:
    Ora, come faccio a far si che cliccando sul link non mi cambi solo il css della pagina stessa ma di tutte le 3 pagine del mio minisito? E' qui che mi blocco... sapreste darmi una mano?
    Se dite chiudo qui l'argomento e lo riapro in javascript... Grazie!!

  9. #9
    Utente di HTML.it L'avatar di kuarl
    Registrato dal
    Oct 2001
    Messaggi
    1,093
    questo alla fine del body non funziona?
    codice:
    <scripttype="text/javascript">
    
    $(document).ready(function(){
        if($.cookie("css")){
            $("link").attr("href",$.cookie("css"));
    }});
    </script>
    mettilo in ogni pagina e dovrebbe andare...

  10. #10
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    130
    Quote Originariamente inviata da kuarl Visualizza il messaggio
    questo alla fine del body non funziona?
    codice:
    <scripttype="text/javascript">
    
    $(document).ready(function(){
        if($.cookie("css")){
            $("link").attr("href",$.cookie("css"));
    }});
    </script>
    mettilo in ogni pagina e dovrebbe andare...
    Che nervoso... sta mattina ero riuscito a farlo funzionare, dovevo solo mettere il pezzo di codice in ogni pagina come suggerito... Tutta oggi cherco di rifare le stesse cose di sta mattina ma niente... non funzia...!! Ora riprovo, non mi arrendo! Anche se non capisco dove sbaglio!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.