Blob的本地缓存（HTML5）

I'm dealing with a scenario where users in the hundreds access to videos stored on a web server on a regular basis. Two conditions are mandatory 1 - Videos must be 100% downloaded before playback is allowed 2 - The last played video(s) should be accessible offline

To begin with, I am providing the Video element not with a static source, but rather with a blob, like follows (webkit only for now)

var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", updateProgress, false);
xhr.open('GET', 'http://someurl/content.mp4', true);
xhr.responseType = 'blob';
xhr.onload = function(e) 
{
 if (this.status == 200) 
 {
  var myBlob = this.response;
  var data = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
  var video = document.getElementById("player");
  video.src = data;
  video.play();
 }
}
xhr.send();

Now, the question: how can I locally cache the above blob? How can I check for its presence in the local machine's cache and retrieve it rather than download it from the web server again?

Thanks

r.