jQuery - Local Storage Serialization

Fiddle exploring how to serialize and deserialize objects to Local Storage.

by brady houseknecht

HTML

<h2>Local Storage</h2>

<div id="fiddleHook">
    <div id="editor">
        <textarea id="messageTextArea" cols="10" rows="3" /></textarea>
        <div>
            <button class="button" id="saveButton">Save</button>
        </div>
    </div>
</div>

CSS

.enter-stage-right {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: 0%;
    }
}
@-webkit-keyframes slidein {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: 0%;
    }
}

JavaScript

(function (app, $, undefined) {
    // Note this fiddle only seems to work if you open the in full screen mode ~
    // https://jsfiddle.net/bradyhouse/vs5q4ktz/6/embedded/result/
    $(document).ready(function () {
        var fiddleDiv = $("#fiddleHook"),
            editorDiv = $("#editor"),
            messageTextArea = $("#messageTextArea"),
            saveButton = $("#saveButton"),
            storageEnabled = isStorageSupported(),
            objectMesssageDefault = {
                message: "Enter your message"
            },
            objectMessage = storageEnabled && localStorage.getItem("message-textarea-val") ? JSON.parse(localStorage.getItem("message-textarea-val")) : objectMesssageDefault;

       
        fiddleDiv.addClass('enter-stage-right');

        if (objectMessage) {
            messageTextArea.val(objectMessage.message);
            saveButton.click(function () {
                objectMessage.message = messageTextArea.val();
                window.incrementDataStore = localStorage.setItem("message-textarea-val", JSON.stringify(objectMessage));
            });
        } else {
            editorDiv.html("Local Storage is not supported in this browser :(");
        }

        function isStorageSupported() {
            try {
                return 'localStorage' in window && window.localStorage !== null;
            } catch (e) {
                return false;
            }
        }
    });



})(window.app = window.app || {}, jQuery)