DOM Elemente aus Cookie auslesen und ausgeben

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DOM Elemente aus Cookie auslesen und ausgeben

    Hallo,

    ich speichere DOM Elemente in einem Javascript Cookie, da ich die erstellten Inhalte bei einem Seitenwechel erhalten möchte.

    Das Speichern funktioniert soweit gut. Leider bekomme ich die Elemente beim aufrufen der Seite nicht wieder ausgebeben

    Hier ist mein Code:

    PHP-Code:
    //speichern
    $('#divBox').live('mouseup', function () {    
            
            var 
    elem = new Array();
            
            $.
    each('.elemente'), function() { 
            var 
    arr jQuery.makeArray('.elemente');
            
    elem arr;    
            });
        
            $.
    cookie("BuilderElements"elem);
        });

    //und das auslesen bei seitenaufruf
    $(document).ready(function () {
        
    optInit getOptionsForPagination();
        
        
    //elemente aus cookie laden
        
    if ($.cookie("BuilderElements").length 0) {
        
            
    console.log('cookie da');
        
            var 
    cookie = $.cookie('BuilderElements');
        
            $(
    cookie).appendTo('#divTest');
            
        }else{ 
    console.log('kein cookie'); }
        
    }); 
    die console gibt auch nur aus das das cookie angelegt ist und auch den inhalt im cookie. leider bekomme ich die elemente nicht wieder in ein DIV eingefügt, so wie die vorher waren.

    wo liegt denn mein fehler??

  • #2
    Mit Deinem Code kann ich nicht viel anfangen, da ich von jQuery keine Ahnung habe. Ich kann Dir aber ein Beispiel geben, wie ich das eventuell mit JavaScript angehen würde und wenn Du damit etwas anfangen kannst, dann könntest Du das ja für jQuery entsprechend anpassen.

    Allgemein sind die Möglichkeiten zum Speichern mit Cookies jedoch begrenzt und eventuell würde sich dann DOM Storage mehr anbieten, da ja viel mehr gespeichert werden könnte. Doch das weißt Du wohl auch allein ohne meine Bemerkung.

    Seite 1:
    HTML-Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <title>Test Seite 1</title>
    </head>
    
    <body>
    <h1>Elemente in Cookie speichern</h1>
    <script type="text/javascript">
    
    if (document.cookie == "") { 
    
        document.cookie  = escape("<div style='border:1px solid #B84420'>enthaltener Content</div>");
        document.cookie += escape("<hr>");
        document.cookie += escape("<p style='color:#6DA719'>Neuer Absatz</p>");
    }
    </script>
    </body>
    </html>
    Seite 2 - Auslesen:
    HTML-Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <title>Test Seite 2</title>
    </head>
    
    <body>
    <h1>Lese Elemente aus Cookie</h1>
    <script type="text/javascript">
    
    if (document.cookie != "") {
    
        var leseaus = unescape(document.cookie);
        var suchhr  = /(<hr>)/;
        var suchdiv = /(<div(.*?)>.+?<\/div>)/;
        var suchp   = /(<p(.*?)>.+?<\/p>)/;
    
        var ergbdiv = suchdiv.exec(leseaus);
        var ergbhr  = suchhr.exec(leseaus);
        var ergbp   = suchp.exec(leseaus);
    
        document.write(ergbdiv[0]);
        document.write(ergbhr[0]);
        document.write(ergbp[0]);
    }
    else {document.write("Es wurde nichts übergeben!");
    }
    </script>
    </body>
    </html>

    Kommentar


    • #3
      Du kannst keine DOM-Elemente "in Cookies speichern" - weil DOM-Elemente Objekte sind, und Cookie nur Strings aufnehmen können.

      Du könntest höchstens die Elemente serialisieren - z.B. sie durch ihren HTML-Code darstellen. Diesen kannst du speichern, und daraus nach dem Auslesen wieder neue Elemente erzeugen.
      I don't believe in rebirth. Actually, I never did in my whole lives.

      Kommentar


      • #4
        also ich bin auf JsonML (JSON Markup Language) gestoßen und will das DOM objekt als json string speichern. leider bekomme ich bei der Funktion immer ein 'null' ausgegeben.. weiß jemand wieso?

        PHP-Code:
        var nodes document.getElementById('divbox');
        console.log(JsonML.fromHTML(nodes)); 
        das ist der JS code https://raw.github.com/mckamey/jsonm.../jsonml-dom.js

        *EDIT*
        hab doch kein null.. hatte anstatt 'divbox' es als jQuery #divbox geschrieben
        Zuletzt geändert von BananaJo; 15.05.2013, 14:11.

        Kommentar


        • #5
          JsonML + Browser-Side Templates (JBST) funktioniert perfekt!

          PHP-Code:
          var nodes document.getElementById('div');

          var 
          json JsonML.fromHTML(nodes);
          json_str JSON.stringify(json);

          cookie = $.cookie("Elements"json_str);

          cookie JsonML.toHTML(cookie);        
          var 
          html JsonML.toHTML(cookie); 
          Zuletzt geändert von BananaJo; 15.05.2013, 15:56.

          Kommentar


          • #6
            Ich habe nun ein neues Problem.. also ich spiechere den JSON String erfolgreich im Cookie und lese den auch erfolgreich aus und zeige den gespeicherten DOM an.. so.. Leider wird nicht der komplette DOM mit dem Inhalt im Parent div gespeichert, sondern nur ein Element im Parent div.. der JSON String sieht korrekt aus und beinhaltet auch alles!! leider ist der String im Cookie gekürzt und bricht genau nach dem erstem Child Element ab.

            das ist der JSON String

            PHP-Code:
            ["DIV",{"class":"Canvas ui-droppable","id":"cnv"},"\n\t\t\t\t",["DIV",{"id":"builder-example","style":"background-image: url(http://localhost/pin/images/builder_example.gif); display: none;"}],"\n\t\t\t",["DIV",{"class":"ui-wrapper ui-draggable","style":"overflow: hidden; position: absolute; width: 110px; height: 152px; top: 52px; left: 320px; margin: 0px;"},["IMG",{"src":"http://www.website.com/images/72526_d.png","itemid":"72526","style":"width: 110px; min-height: 10px; height: 152px; padding: 0px; left: 229px; top: 82px; cursor: move; margin: 0px; resize: none; position: static; zoom: 1; display: block;","class":"ui-resizable"}],["DIV",{"class":"ui-resizable-handle ui-resizable-n","style":"z-index: 90; display: none;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-e","style":"z-index: 90; display: none;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-s","style":"z-index: 90; display: none;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-w","style":"z-index: 90; display: none;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-ne","style":"z-index: 90; display: none;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se","style":"z-index: 90; display: none;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-sw","style":"z-index: 90; display: none;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-nw","style":"z-index: 90; display: none;"}],["A",{"href":"javascript:void(0)","id":"btnDelete","class":"remove","title":"Entfernen","alt":"Entfernen","style":"display: none;"}],["A",{"href":"javascript:void(0)","id":"btnClone","class":"clone","title":"Klonen","alt":"Klonen","style":"display: none;"}],["A",{"href":"javascript:void(0)","id":"btnUp","class":"up","title":"Vorne","alt":"Vorne","style":"display: none;"}],["A",{"href":"javascript:void(0)","id":"btnDown","class":"down","title":"Hinten","alt":"Hinten","style":"display: none;"}],["A",{"href":"javascript:void(0)","id":"btnFlipH","class":"flipH","title":"Spiegeln","alt":"Spiegeln","style":"display: none;"}],["A",{"href":"javascript:void(0)","id":"btnFlipV","class":"flipV","title":"Spiegeln","alt":"Spiegeln","style":"display: none;"}]],["DIV",{"class":"ui-wrapper ui-draggable ui-selected ui-draggable-dragging","style":"overflow: hidden; position: absolute; width: 148px; height: 148px; top: 68px; left: 119px; margin: 0px;"},["IMG",{"src":"http://www.website.com/images/214312_d.png","itemid":"214312","style":"width: 148px; min-height: 10px; height: 148px; padding: 0px; left: 66px; top: 126px; cursor: move; margin: 0px; resize: none; position: static; zoom: 1; display: block;","class":"ui-resizable"}],["DIV",{"class":"ui-resizable-handle ui-resizable-n","style":"z-index: 90; display: block;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-e","style":"z-index: 90; display: block;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-s","style":"z-index: 90; display: block;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-w","style":"z-index: 90; display: block;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-ne","style":"z-index: 90; display: block;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se","style":"z-index: 90; display: block;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-sw","style":"z-index: 90; display: block;"}],["DIV",{"class":"ui-resizable-handle ui-resizable-nw","style":"z-index: 90; display: block;"}],["A",{"href":"javascript:void(0)","id":"btnDelete","class":"remove","title":"Entfernen","alt":"Entfernen","style":"display: block;"}],["A",{"href":"javascript:void(0)","id":"btnClone","class":"clone","title":"Klonen","alt":"Klonen","style":"display: block;"}],["A",{"href":"javascript:void(0)","id":"btnUp","class":"up","title":"Vorne","alt":"Vorne","style":"display: block;"}],["A",{"href":"javascript:void(0)","id":"btnDown","class":"down","title":"Hinten","alt":"Hinten","style":"display: block;"}],["A",{"href":"javascript:void(0)","id":"btnFlipH","class":"flipH","title":"Spiegeln","alt":"Spiegeln","style":"display: block;"}],["A",{"href":"javascript:void(0)","id":"btnFlipV","class":"flipV","title":"Spiegeln","alt":"Spiegeln","style":"display: block;"}]]] 
            und das ist was im cookie nach dem auslesen ausgegeben wird

            PHP-Code:
            BuilderElements=%22%5B%22DIV%22%2C%7B%22class%22%3A%22Canvas%20ui-droppable%22%2C%22id%22%3A%22cnv%22%7D%2C%22%5Cn%5Ct%5Ct%5Ct%5Ct%22%2C%5B%22DIV%22%2C%7B%22id%22%3A%22builder-example%22%2C%22style%22%3A%22background-image%3A%20url(http%3A%2F%2Flocalhost%2Fpin%2Fimages%2Fstyle_builder_example.gif)%3B%20display%3A%20none%3B%22%7D%5D%2C%22%5Cn%5Ct%5Ct%5Ct%22%2C%5B%22DIV%22%2C%7B%22class%22%3A%22ui-wrapper%20ui-draggable%22%2C%22style%22%3A%22overflow%3A%20hidden%3B%20position%3A%20absolute%3B%20width%3A%20110px%3B%20height%3A%20152px%3B%20top%3A%2052px%3B%20left%3A%20320px%3B%20margin%3A%200px%3B%22%7D%2C%5B%22IMG%22%2C%7B%22src%22%3A%22http%3A%2F%2Fwww.website.com%2Fimages%2F72526_d.png%22%2C%22itemid%22%3A%2272526%22%&#8230;A%22Spiegeln%22%2C%22style%22%3A%22display%3A%20block%3B%22%7D%5D%5D%5D%22 
            woran kan das denn schon wieder liegen?? ich vermute es ist der Berich mit '],[' im String, so das zweite Kind Element anfängt.. kann das sein???
            wie kann ich denn den ganzen String speichern?

            Kommentar


            • #7
              Schrieb ich bereits weiter oben, Cookies sind begrenzt. Habe noch einmal nachgelesen, auf mindestens 4096 Bytes pro Cookie, wie es heißt. Wie viel hat Dein kodierter String? Übersteigt der diese Grenze? Nehme es an, da der ohne Kodierung bereits rund 4.000 Zeichen enthält. Falls ja und wenn Du mehr speichern möchtest, nehme Storage oder vielleicht hilft auch aufteilen auf mehrere Cookies.

              Kommentar

              Lädt...
              X