jQuery - Local Storage Get/Set

Fiddle exploring how to persists user's input using 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) {

    $(document).ready(function () {
        var fiddleDiv = $("#fiddleHook"),
            editorDiv = $("#editor"),
            messageTextArea = $("#messageTextArea"),
            saveButton = $("#saveButton"),
            storageEnabled = isStorageSupported(),
            message = storageEnabled && localStorage.getItem("message-textarea-val") ? localStorage.getItem("message-textarea-val") : "Enter your message",
            messageTextAreaHeight = storageEnabled && localStorage.getItem("message-textarea-height") ? localStorage.getItem("message-textarea-height") : "93px",
            messageTextAreaWidth = storageEnabled && localStorage.getItem("message-textarea-width") ? localStorage.getItem("message-textarea-width") : "124px";

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

        if (storageEnabled) {
            messageTextArea.val(message);
            messageTextArea.css('height', messageTextAreaHeight);
            messageTextArea.css('width', messageTextAreaWidth);
            saveButton.click(function () {
                message = messageTextArea.val();
                window.incrementDataStore = localStorage.setItem("message-textarea-val", message);
                messageTextAreaHeight = messageTextArea.height();
                messageTextAreaWidth = messageTextArea.width();
                window.incrementDataStore = localStorage.setItem("message-textarea-height", messageTextAreaHeight);
                window.incrementDataStore = localStorage.setItem("message-textarea-width", messageTextAreaWidth);
            });
        } 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;
            }
        }
    });

    var form = function () {

    }


})(window.app = window.app...