Save JSON File Locally

Question

I am designing an HTML5 website that allows you to create and position shapes with several attributes. The shapes are created as divs of class="shape" and the attributes are stored to each shape div using the data method. I'd like to be able to save the position and attributes of the shapes, in a JSON file, with a user defined name.

Currently, I am using ajax and php to generate the JSON file and save it on the server.

Any ideas or thoughts on how it should be done? Bonus points for libraries, APIs and examples!

Clarification Edit: Saving to a discrete file in a user-defined location would be preferable. However, depending on the difficulty factor between the two options, browser storage could certainly suffice.

Answer 1

I guess there are a lot of possibilities, but one is to use local storage and build some kind of syncronization with your current application. You can sync it with ajax or websockets or so on.

var updateLocalData = function(data){
    if( supports_html5_storage() ){
        localStorage.setItem('shape', JSON.stringify(data))
    }
}

to sync your data get the written localStorage stuff and send it with your prefered method. And also keep in mind to use any kind of timestamp to always be able to find the latest version.

var getLocalData = function(){
    if( supports_html5_storage() ){
        var userData = JSON.parse(localStorage.getItem('shape'));
        if(userData !== null){
            return userData;
        }
    }
    var tStamp = getCurrentTimeStamp()+"";
    var obj = {};
    obj[tStamp] = {"shapedata": ... };
    return obj;
}

Answer 2

Try

html

<input id="filename" type="text" placeholder="Please enter filename" />
<button for="filename">click</button><a id="download" download="" href=""></a>
<br />
<div class="shape"></div>

css

#download {
    display:none;
}

js

    $("[for=filename]").on("click", function (e) {
        var shape = $(".shape"),
            // provide `name` if no `input` `value`
            name = $("#filename").val() || "data-" + $.now(),
            url = /*  `request` `url` */;
        // element data stuff
        shape.data("style", shape.css(["color", "width", "height"]));
        var request = function (url, filename) {
            var file = JSON.stringify(shape.data("style"));
            return $.ajax({
                beforeSend: function (jqxhr, settings) {
                    // `name`
                    jqxhr.filename = filename;
                },
                url: url,
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: file
            })
            .then(function (data, textStatus, jqxhr) {
                $("a#download").attr({
                    "download": jqxhr.filename + ".json",
                        "href": "data:application/json;charset=utf8;base64," 
                                + window.btoa(JSON.stringify(data))
                }).get(0).click();
            }, function(jqxhr, textStatus, errorThrown) {
                console.log(textStatus, errorThrown)
            });
        };
        request(url, name)
    });

jsfiddle http://jsfiddle.net/guest271314/7rhs55k6/

See <a> Attributes download

$(function () {
    $("[for=filename]").on("click", function (e) {
        var shape = $(".shape"),
            name = $("#filename").val() || "data-" + $.now(),
            url = "";
        shape.data("style", shape.css(["color", "width", "height"]));
        var request = function (url, filename) {
            var file = JSON.stringify(shape.data("style"));
            return $.ajax({
                beforeSend: function (jqxhr, settings) {
                    jqxhr.filename = filename;
                },
                url: url,
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: file
            }).always(function (jqxhr) {
                    $("a#download").attr({
                        "download": jqxhr.filename + ".json",
                            "href": "data:application/json;charset=utf8;base64," 
                                    + window.btoa(this.data)
                    }).get(0).click();
             });
        };
        request(url, name)
    });
})

#download {
    display:none;
}
.shape {
    color:green;
    width:50px;
    height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="filename" type="text" placeholder="Please enter filename" />
<button for="filename">click</button><a id="download" download="" href=""></a>
<br />
<div class="shape"></div>