To improve performance of a web application we need to reduce server & client communication as much as we can. This technique helps to improve performance of a web application. Always it’s wise for a programmer to store static data in client browser. Except for the first time but every time while user will request the same page from the serve we need to check whether the similar data exists in the client memory or not. If the similar data exist in the client memory we need to load this data to reduce server & client communication. In this way to achieve this we need to store our static data in the client browser memory. To make this process easier HTML5 introduced Local Storage. Which stores data in client browser for the unlimited time we want. Compare to session storage html5 local storage stored data after user interaction. I can say html5 local storage is like a offline data store.
During web application development we do integrate many images to our application to make our application more user attractive. Here images are static data. If the user is requesting the similar page 10 times from his/her browser we need to avoid server interaction for nine times rather then for the first one. So in this session let us know how to save image in html5 local storage.
In the below example I am storing an image to HTML5 local storage. In HTML body here I have 2 images imageToLoadInLocalStorage & imageToShowFromLocalStorage. The first image has a src attribute which loads a png image (global-img.png) from server. Second image is having blank src attribute. Using client script here I am storing the first image to local storage & fetching the similar image from local storage to my second image. The mechanism I used here is I am fetching the first image using DOM object method getElementById. Converting the image to Base 64 data url format & storing it to local storage using localStorage.setItem() method. Then fetching the image from local storage using localStorage.getItem() method & assign the image to my second image control.
To run the below example copy the codes into a notepad file. Save it as HTML. Then open the file using any browser which supports HTML5 storage. Before run the below app make sure you are with internet connectivity.
Example to save image using HTML5 Local Storage
<title>Demo app to save image using HTML5 Local Storage</title>
<!--CDN link of Jquery-->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript"><br />
/* Function to Convert image into Base64 */<br />
function ConvertImageToBase64(imageToConvertBase64) {<br />
/* Creating a Canvas in HTML5 */<br />
var drawCanvas = document.createElement("canvas");<br />
/* Setting the Canvas width & height as refer to the Image */<br />
drawCanvas.width = imageToConvertBase64.width;<br />
drawCanvas.height = imageToConvertBase64.height;<br />
/* Copy the image to Canvas */<br />
var copyImageToCanvas = drawCanvas.getContext("2d");<br />
copyImageToCanvas.drawImage(imageToConvertBase64, 0, 0);<br />
/* Converting Image to Data URL */<br />
var dataUrlOfImage = drawCanvas.toDataURL("image/png");<br />
/* Returning Data URL of the Image */<br />
return dataUrlOfImage.replace(/^data:image\/(png|jpg);base64,/, "");<br />
}</p>
<p>$(document).ready(function() {<br />
/* Fetching the image using JavaScript getElementById */<br />
var imageToLoadInLocalStorage = document.getElementById('imageToLoadInLocalStorage');<br />
/* Calling the function ConvertImageToBase64 to convert the Image to Base 64 */<br />
var imageDataUrl = ConvertImageToBase64(imageToLoadInLocalStorage);<br />
/* Storing the image in Local Storage using setItem() method */<br />
localStorage.setItem("imageData", imageDataUrl);</p>
<p>/* Using getItem() fetching the image from Local Storage */<br />
var dataImageUrl = localStorage.getItem('imageData');<br />
/* Using getElementById to detect the image control for loading local storage image */<br />
var imageToShow = document.getElementById('imageToShowFromLocalStorage');<br />
/* Assigning source to a blank image with id imageToShowFromLocalStorage */<br />
imageToShow.src = "data:image/png;base64," + dataImageUrl;<br />
});<br />
</script>
<!--Image with Source-->
<img src="global-img.png" id="imageToLoadInLocalStorage" />
<!--Image with no Source to grab from Local Storage-->
<img src="" id="imageToShowFromLocalStorage" />
