What is the minimum "acceptable" delay for a local storage in an interval loop (for "auto-saving")?

Question

I'm working on a web app with an auto-saving feature. I use something like that for managing backup:

setInterval(function(){ 
    localStorage.setItem('save', data) 
}, TIME_INTERVAL)

Each save replace the previous one.

Can you tell me a reasonable value for TIME_INTERVAL?

I don't really know the impact on the client side. I'm looking for technical answers, in the user point of view, a permanent save is the best for him but a delay can be tolerated if needed. I even did some tests with TIME_INTERVAL = 1 and didn't see any issues on my browser but this seems insane to write data on the client-side every millisecond... What's do you think? Should I save the data every second or this is a really bad idea?

Answer 1

These are some things in the client that get affected if you set the interval too short:

1. Battery Life. You burn battery constantly since the device never gets to sleep (think tablet, phone or laptop running on battery). If the localStorage is stored on a hard disk, then the hard drive doesn't get to power down either.
2. CPU Contention. You are constantly using the CPU which could cause some occasional contention for the CPU (perhaps not noticeable in this case because localStorage.setItem() is pretty fast).
3. Storage Usage. Since localStorage is meant to be semi-permanent storage (survives power-down), it has to be written to a semi-permanent storage which will be either hard drive or flash. If you're writing every few milliseconds to this storage, it can certainly wear out that storage sooner.

So, since all of these are negatives in some ways, you should not be setting the interval time shorter than you practically need it to be set. You will find that many other applications (such as StackOverflow or Google docs) do an autosave in a few minutes AND they don't do another auto-save until after the underlying data has actually changed.

Unless you have a particular compelling case for saving more often than every few minutes, I don't see why you should go shorter than that. And, it would really, really help battery life if you don't even run your timer until the underlying data has actually changed.

Answer 2

Think about this: it takes 16ms (for a 60Hz screen) just to refresh the screen (16ms per frame). So 1ms sounds like total overkill, for anything you might be doing.

I have a trick; maybe it's useful to you. A combination of clearTimeout and setTimeout gives you the best of all worlds.

I put a 500ms (feel free to change this number) delay between the client typing and the storage. So, it stores a new value as soon as the client stops typing for 500ms. It's useless to store a text every time a letter is added.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var t;              // timer object
$(document).ready(function() {
  var my_textarea = $('#my_textarea');
  my_textarea.on('input', function() {
    backup(my_textarea.val());
  })
});
function backup(data) {
  var interval = 500;
  // if a change was made, less than 500ms ago, we ignore the previous change, and execute the latest change.
  clearTimeout(t);                     
  t = setTimeout(function(){           
    localStorage.setItem('save', data)
  }, interval);                         
}
</script>
<textarea id="my_textarea"></textarea>

By the way, does anybody have an opinion about this? I've been doing this for a while, in different situations.