Home >
As much as I love my browser (Firefox 3.5 FTW!), I'm no stranger to quirkiness, crashes, and just general breakdowns when surfing the web. As a blogger, this can be especially frustrating. Nothing bugs me more than losing a good blog entry because of a crash or some other (normally user) mistake. For a while now I've employed a simple method on my own blog to handle this possibility. Every few seconds I use cookies to store the values of the blog entry and blog title. If for some reason the browser crashes (or the operating system, or I lose power, etc.), I can come back to the page and see the contents of my blog entry just as if I've never left.
This method is not perfect of course. There is a strict limit to the size of the cookie data you store on the browser. You have a limit not only on the total number of cookies but to how much data can be stored. In my simple testing, I've never seen a blog entry that didn't "fit" inside the cookie. I'm not writing a novel, nor should I be on a blog.
So with that being said, here is a simple example of this technique that makes use of both jQuery, and a very nice, very simple, jQuery Cookie Plugin. This plugin makes cookie manipulation as easy as $.cookie('name','val'), which is about as easy as you can make it. I'll display the entire page, and then walk through the functionality.
Alright, so what's going on here? First note the form at the bottom. It mimics a simple blog entry with a title and entry. Blog entries will typically have a bit more, but these are the fields I really care about.
Scrolling back to the top, I've included both jQuery and the plugin. Within the document.ready block are a few separate things. The first thing I do is grab the value from two cookies - draftTitle and draftBody. If the values are not null, I use them to update the form fields. Next - I set up an interval to run saveDraft() every 5 seconds. I kind of grabbed that number out of the air, but I don't see anything wrong with it.
The last part of the document.ready block handles form submissions. In my case the only thing I've done is clear the cookies (by setting their values to null) and then allowing the form to submit as is.
The very last part of the code block, saveDraft, simply handles the timed interval which will store the cookie values. Note the option structure sets an expires value of 7 days. Again, this is pretty arbitrary. I assume that if your browser does crash while editing, you are most likely going to jump right back into editing pretty soon.
Any comments on this method?
This method is not perfect of course. There is a strict limit to the size of the cookie data you store on the browser. You have a limit not only on the total number of cookies but to how much data can be stored. In my simple testing, I've never seen a blog entry that didn't "fit" inside the cookie. I'm not writing a novel, nor should I be on a blog.
So with that being said, here is a simple example of this technique that makes use of both jQuery, and a very nice, very simple, jQuery Cookie Plugin. This plugin makes cookie manipulation as easy as $.cookie('name','val'), which is about as easy as you can make it. I'll display the entire page, and then walk through the functionality.
<html>
<head>
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery.cookie.js"></script>
<script>
$(document).ready(function () {
console.log('Start me up!')
//check for draft_title and draft_body
var draftTitle = $.cookie('draftTitle')
var draftBody = $.cookie('draftBody')
console.log('title='+draftTitle)
console.log('body='+draftBody)
if(draftTitle) $("#title").val(draftTitle)
if(draftBody) $("#body").val(draftBody)
//update the cookies every 10 seconds....
window.setInterval('saveDraft()', 5*1000)
//clear cookies on form submission
$("#mainForm").submit(function() {
console.log('clearing cookies...')
$.cookie('draftTitle',null)
$.cookie('draftBody',null)
return true
})
})
function saveDraft() {
console.log('saveDraft')
$.cookie('draftTitle', $("#title").val(), { expires:7})
$.cookie('draftBody', $("#body").val(), { expires:7})
}
</script>
</head>
<body>
<form method="post" id="mainForm">
<table>
<tr>
<td>Title:</td>
<td><input type="text" name="title" id="title"></td>
</tr>
<tr>
<td>Entry:</td>
<td><textarea name="body" id="body" cols="40" rows="10"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Save"></td>
</tr>
</table>
</form>
</body>
</html>
Alright, so what's going on here? First note the form at the bottom. It mimics a simple blog entry with a title and entry. Blog entries will typically have a bit more, but these are the fields I really care about.
Scrolling back to the top, I've included both jQuery and the plugin. Within the document.ready block are a few separate things. The first thing I do is grab the value from two cookies - draftTitle and draftBody. If the values are not null, I use them to update the form fields. Next - I set up an interval to run saveDraft() every 5 seconds. I kind of grabbed that number out of the air, but I don't see anything wrong with it.
The last part of the document.ready block handles form submissions. In my case the only thing I've done is clear the cookies (by setting their values to null) and then allowing the form to submit as is.
The very last part of the code block, saveDraft, simply handles the timed interval which will store the cookie values. Note the option structure sets an expires value of 7 days. Again, this is pretty arbitrary. I assume that if your browser does crash while editing, you are most likely going to jump right back into editing pretty soon.
Any comments on this method?
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Nice post, Raymond. One comment on the script:
It would be more efficient to change this line:
window.setInterval('saveDraft()', 5*1000)
to this:
window.setInterval(saveDraft, 5*1000)
And then you can move the saveDraft function declaration to be inside your document-ready callback function so that it is not in the global namespace.
Dang it - I knew that syntax was a bit off. I had looked it up because I was having trouble getting it working, and it just felt.... wrong to me. Thanks for confirming this for me!
Man, Beaultiful Article!! Thanks!
Just a thought... when you handle the form submit event, you're clearing the cookie and then returning true. That will in effect clear your cookies before confirming whether your post submits successfully.
Maybe it would be better to submit the form with ajax and clear the cookies on success rather than whether it succeeds or not?
Am I missing something?
Btw, I like the cookie plugin. I'll have to try that out.
@Trevor: Ah, good point. In my case, I assumed that any "trouble" would occur WHILE editing, not after I click save. I didn't want to turn the form itself into an ajax form so I kept that part simple.
You could remove that code, and clear the cookies server side on successful addition.
That's a lot of work for limited functionality :). Have you seen the Lazarus plugin for Firefox? https://addons.mozilla.org/en-US/firefox/addon/6984
A lot of work? I don't think so. :) If you remove all the console.logs, it's maybe 10 lines of JS. It requires no plugin for the user, and, obviously, would work in Safari/IE as well. :)
I love the idea, and things this this are what I had in mind when I added the jQuery bindings to my own JavaScript cookie library. They help automate some of the form-to-cookie work and vice-versa.
The library can be found at http://plugins.jquery.com/project/cookies or directly at http://code.google.com/p/cookies/
Jim