Editor: localStorage saving & editing strategy

rldean1

What is the recommended strategy when working with the browser's localStorage? Assume that the data for display is coming from SQL, but I can't make AJAX calls to save changes -- I must use custom functions to make updates/deletes. I ultimately want to detect a change, and then save it, possibly to localStorage. With that in mind, are my thoughts below correct? What would you do in this scenario?

1. You don't need to set data: for your DataTable to the content in localStorage. (My data is on SQL, stored in an [{array of objects}])
2. You can track the create, edit, and remove actions with the AJAX function in Editor to save changes to localStorage
3. Within those actions, I could call my custom functions to perform actual DB updates

// Set up the editor
editor = new $.fn.dataTable.Editor({
    table: "#example",
    fields: [{
        //labels
        //names
    }
    ], ajax: function (method, url, d, successCallback, errorCallback) {

        //console.log(method);
        //console.log(url);
        console.log(d);
        // console.log(successCallback);
        // console.log(errorCallback);

        var output = { data: [] };

        if (d.action === 'create') {
            // Create new row(s), using the current time and loop index as
            // the row id
            var dateKey = +new Date();

            $.each(d.data, function (key, value) {
                var id = dateKey + '' + key;

                value.DT_RowId = id;
                localDB[id] = value;
                output.data.push(value);
            });


            /**
             * 
             * CALL CUSTOM FUNCTION TO CREATE DATA 
             * USING CONTENT IN LOCAL STORAGE
             * 
             */


        }
        else if (d.action === 'edit') {
            // Update each edited item with the data submitted
            $.each(d.data, function (id, value) {
                value.DT_RowId = id;
                $.extend(localDB[id], value);
                output.data.push(localDB[id]);
            });

            /**
            * 
            * CALL CUSTOM FUNCTION TO EDIT DATA 
            * USING CONTENT IN LOCAL STORAGE
            * 
            */



        }
        else if (d.action === 'remove') {
            // Remove items from the object
            $.each(d.data, function (id) {
                delete localDB[id];
            });

            /**
            * 
            * CALL CUSTOM FUNCTION TO REMOVE DATA 
            * USING CONTENT IN LOCAL STORAGE
            * 
            */

        }

        localStorage.setItem('localDB', JSON.stringify(localDB));

        // Show Editor what has changed
        successCallback(output);
    }
});

allan

but I can't make AJAX calls to save changes -- I must use custom functions to make updates/deletes

Rather than writing the changes into localStorage, could you just call your functions from inside the ajax function that you've created? Adding in localStorage seems like it would add an extra layer of complication. Fair enough if you need that, but if not then skip that step (I'm not clear if you do need it or not).

Allan

rldean1

@allan I don't need localStorage.

I think I'm just concerned as to what Editor might expect to be returned when the AJAX function is complete.

allan

That information is documented here. Basically you need to call the callback that it passes into your ajax function with the JSON data for the rows that were created / edited (or any error messages if needed).

Allan