Saving polygon in GeoJSON

Hello,

can someone help me how I can save the drawn polygons and lines in GeoJSON? And how do I save the polygon and lines, when I reloaded this page? (programmed with openlayers 3)
HTML:

<div class="edit-form">

                        <h2>Messung</h2>
                        <form class="form-inline">
                            <label>Geometry type &nbsp;</label>
                            <select id="type">
                                <option value="length" >Length</option>
                                <option value="area" >Area</option>
                            </select>
                        </form>
                        <div class="span12">
                            <input id="measure" type="button" value="measure on" onclick="checkMeassure()"/>
                            <input id="measureOff" type="button" value="measure off" onclick="checkMeassureOff()"/>
                        </div>

                        <div class="span12">
                            <ol id="measureOutput" reversed></ol>
                        </div>

                    </div>

                    <div class="edit-form">
                        <div class="span4 offset0">
                            <div id="info" class="alert alert-success">
                                &nbsp;
                            </div>
                        </div>
</div>

Javascript:

var iconsDraw = [], meassureSouce, meassureVector, checkMeassureInitialized = false, mouseMoveHandler, outputList, output,
styleCache = {}, draw;

var sketch; //currently subscribed function@type {ol.Feature}
var sketchElement; //Element für derzeit gezeichnete Funktion @type {Element}

var  drawstart= function(evt) { 
    // set sketch
    sketch = evt.feature;
    sketchElement = document.createElement('li');
    outputList = document.getElementById('measureOutput');

    if (outputList.childNodes) {
        outputList.insertBefore(sketchElement, outputList.firstChild);
    } else {
        outputList.appendChild(sketchElement);
    }
};

var drawEnd = function(evt) {
    // unset sketch
    sketch = null;
    sketchElement = null;
};

//style für das zeichnen
var drawStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 0, 0, 0.2)' 
                }),
                stroke: new ol.style.Stroke({
                    color: '#DC143C',//'#ffcc33',
                    width: 3
                }),
                image: new ol.style.Circle({
                    radius: 1, 
                    fill: new ol.style.Fill({
                        color: '#DC143C'//'#ffcc33'
                    })
                })
            });

var typeSelect = document.getElementById('type');

var addInteraction = function(evt) { 
    checkMeassureOff();
    
    var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
    draw = new ol.interaction.Draw({
        source: meassureSouce,
        type: /** @type {ol.geom.GeometryType} */ (type),
        style: drawStyle
    });

    iconsDraw.push(meassureVector);
 
    map.addInteraction(draw);
    
    draw.on('drawstart', drawstart);
    draw.on('drawend', drawEnd);
    $(map.getViewport()).on('mousemove', mouseMoveHandler);
    
    //the iconsDraw be bound to the checkbox
    var chMeassure = new ol.dom.Input(document.getElementById("visibleMeasure"));
    for(var k = 0; k<iconsDraw.length; k++){
        chMeassure.bindTo('checked', iconsDraw[k], 'visible');
    }  
};

function checkMeassure(){
    mouseMoveHandler = function(evt) {
        if (sketch) {
            var output;
            var geom = (sketch.getGeometry());
            if (geom instanceof ol.geom.Polygon) {
                output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
            } else if (geom instanceof ol.geom.LineString) {
                output = formatLength( /** @type {ol.geom.LineString} */ (geom));
            }
            sketchElement.innerHTML = output;
        }
    };

    if(!checkMeassureInitialized) {
        meassureSouce = new ol.source.Vector();

        meassureVector = new ol.layer.Vector({
            source: meassureSouce,
            style: drawStyle
            
        });
        map.addLayer(meassureVector);
    }
    checkMeassureInitialized = true;

    typeSelect.onchange = function(e) {
        map.removeInteraction(draw);
        addInteraction();
    }; 

    /**
    * format length output
    * @param {ol.geom.LineString} line
    * @return {string}
    */
   var formatLength = function(line) {
        var length = Math.round(line.getLength() * 100) / 100;
        var output;
        if (length > 100) {
            output = (Math.round(length / 1000 * 100) / 100) +' ' + 'km';
        } else {
            output = (Math.round(length * 100) / 100) +' ' + 'm';
        }
        return output+" "+formUrl;
    }; 
    

    /**
    * format length output
    * @param {ol.geom.Polygon} polygon
    * @return {string}
    */
    var formatArea = function(polygon) {
        var area = polygon.getArea();
        var output;
        if (area > 10000) {
            output = (Math.round(area / 1000000 * 100) / 100) +' ' + 'km<sup>2</sup>';
        } else {
            output = (Math.round(area * 100) / 100) +' ' + 'm<sup>2</sup>';
        }
        return output+" "+formUrl;
    };
    
    addInteraction();
    
};

//////////////////////////////////////////////////////////////////////////////
function checkMeassureOff(){
    if(draw) {
        draw.un('drawstart', drawstart);
        draw.un('drawend', drawEns);
        map.removeInteraction(draw);
    }
    $(map.getViewport()).off('mousemove', mouseMoveHandler);
};

I hope you can help me!

I apologize for the bad english.

I thank you in advance!