boltronics/xmlhttprequest-localstorage-test.html

## xmlhttprequest-localstorage-test.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; img-src * data: blob: 'unsafe-inline';" />
    <title>Local storage test</title>
  </head>
  <body>
    <h1>This is a local storage test</h1>
    <script src="localforage.min.js"></script>
    <div class="event-log">
      <textarea readonly class="event-log-contents" rows="20" cols="80"></textarea>
    </div>
    <div class="controls">
      <button id="save" type="button">Save offline data</button>
    </div>
    <div class="controls">
      <button id="show" type="button">Show offline data keys</button>
    </div>
    <div class="controls">
      <button id="load" type="button">Load offline data</button>
    </div>
    <img id="show_img" src="#" alt="A really really big image!" style="visibility: hidden;" />

    <script>
      // https://localforage.github.io/localForage/
      console.log('localforage is: ', localforage);

      const url = "world.topo.bathy.200407.3x21600x10800.jpg";
      const log = document.querySelector('.event-log-contents');
      const save = document.querySelector('#save');

      imageURI = null;

      req = new XMLHttpRequest();
      req.onreadystatechange = ProcessResponse;
      req.open('GET', url, true);
      req.overrideMimeType('text/plain; charset=x-user-defined');

      // setItem() example
      save.addEventListener('click', () => {
          logMsg('Fetching JPEG from server...');
          req.send(null);

          req.onreadystatechange = function() {
              if (req.readyState === 4) { // readyState DONE
                  if ((req.status == 200) || (req.status == 0)) {
                      localforage.setItem('world_img', encode64(req.responseText)).then(function(image) {
                          logMsg('JPEG has been stored locally.');
                      }).catch(function(err) {
                          // This code runs if there were any errors
                          console.log(err);
                      });
                  } else {
                      alert("Something misconfiguration : " + "\nError Code : " + req.status +
                            "\nError Message : " + req.responseText);
                  };
              };
          };
      });

      show.addEventListener('click', () => {
          // keys()
          localforage.keys().then(function(keys) {
              // An array of all the key names.
              logMsg(keys);
          }).catch(function(err) {
              // This code runs if there were any errors
              console.log(err);
          });
      });

      function logMsg(msg)
      {
          console.log(msg);
          log.textContent = log.textContent + msg + "\n";
      };

      // http://www.philten.com/us-xmlhttprequest-image/
      function ProcessResponse()
      {
          if (req.readyState==4)
          {
              if (req.status==200)
              {
                  retval ="";
                  for (var i=0; i<=req.responseText.length-1; i++)
                      retval += String.fromCharCode(req.responseText.charCodeAt(i) & 0xff);
              }
          }
      };

      function encode64(inputStr)
      {
          var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
          var outputStr = "";
          var i = 0;

          while (i<inputStr.length)
          {
              //all three "& 0xff" added below are there to fix a known bug
              //with bytes returned by xhr.responseText
              var byte1 = inputStr.charCodeAt(i++) & 0xff;
              var byte2 = inputStr.charCodeAt(i++) & 0xff;
              var byte3 = inputStr.charCodeAt(i++) & 0xff;

              var enc1 = byte1 >> 2;
              var enc2 = ((byte1 & 3) << 4) | (byte2 >> 4);

	      var enc3, enc4;
	      if (isNaN(byte2))
	      {
		  enc3 = enc4 = 64;
	      }
	      else
	      {
      	          enc3 = ((byte2 & 15) << 2) | (byte3 >> 6);
		  if (isNaN(byte3))
		  {
                      enc4 = 64;
		  }
		  else
		  {
	      	      enc4 = byte3 & 63;
		  }
	      }

              outputStr +=  b64.charAt(enc1) + b64.charAt(enc2) + b64.charAt(enc3) + b64.charAt(enc4);
          }

          return outputStr;
      }

      load.addEventListener('click', () => {
          logMsg("Fetching JPEG data from local storage...");
          localforage.getItem('world_img', function(err, value) {
              // Run this code once the value has been
              // loaded from the offline store.
              var image = document.getElementById("show_img");
              image.src = "data:image/jpeg;base64," + value;
              image.style.visibility = "visible";
              logMsg("JPEG image loaded.");
          });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; img-src * data: blob: 'unsafe-inline';" />
	<title>Local storage test</title>
	</head>
	<body>
	<h1>This is a local storage test</h1>
	<script src="localforage.min.js"></script>
	<div class="event-log">
	<textarea readonly class="event-log-contents" rows="20" cols="80"></textarea>
	</div>
	<div class="controls">
	<button id="save" type="button">Save offline data</button>
	</div>
	<div class="controls">
	<button id="show" type="button">Show offline data keys</button>
	</div>
	<div class="controls">
	<button id="load" type="button">Load offline data</button>
	</div>
	<img id="show_img" src="#" alt="A really really big image!" style="visibility: hidden;" />

	<script>
	// https://localforage.github.io/localForage/
	console.log('localforage is: ', localforage);

	const url = "world.topo.bathy.200407.3x21600x10800.jpg";
	const log = document.querySelector('.event-log-contents');
	const save = document.querySelector('#save');

	imageURI = null;

	req = new XMLHttpRequest();
	req.onreadystatechange = ProcessResponse;
	req.open('GET', url, true);
	req.overrideMimeType('text/plain; charset=x-user-defined');

	// setItem() example
	save.addEventListener('click', () => {
	logMsg('Fetching JPEG from server...');
	req.send(null);

	req.onreadystatechange = function() {
	if (req.readyState === 4) { // readyState DONE
	if ((req.status == 200) \|\| (req.status == 0)) {
	localforage.setItem('world_img', encode64(req.responseText)).then(function(image) {
	logMsg('JPEG has been stored locally.');
	}).catch(function(err) {
	// This code runs if there were any errors
	console.log(err);
	});
	} else {
	alert("Something misconfiguration : " + "\nError Code : " + req.status +
	"\nError Message : " + req.responseText);
	};
	};
	};
	});

	show.addEventListener('click', () => {
	// keys()
	localforage.keys().then(function(keys) {
	// An array of all the key names.
	logMsg(keys);
	}).catch(function(err) {
	// This code runs if there were any errors
	console.log(err);
	});
	});

	function logMsg(msg)
	{
	console.log(msg);
	log.textContent = log.textContent + msg + "\n";
	};

	// http://www.philten.com/us-xmlhttprequest-image/
	function ProcessResponse()
	{
	if (req.readyState==4)
	{
	if (req.status==200)
	{
	retval ="";
	for (var i=0; i<=req.responseText.length-1; i++)
	retval += String.fromCharCode(req.responseText.charCodeAt(i) & 0xff);
	}
	}
	};

	function encode64(inputStr)
	{
	var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
	var outputStr = "";
	var i = 0;

	while (i<inputStr.length)
	{
	//all three "& 0xff" added below are there to fix a known bug
	//with bytes returned by xhr.responseText
	var byte1 = inputStr.charCodeAt(i++) & 0xff;
	var byte2 = inputStr.charCodeAt(i++) & 0xff;
	var byte3 = inputStr.charCodeAt(i++) & 0xff;

	var enc1 = byte1 >> 2;
	var enc2 = ((byte1 & 3) << 4) \| (byte2 >> 4);

	var enc3, enc4;
	if (isNaN(byte2))
	{
	enc3 = enc4 = 64;
	}
	else
	{
	enc3 = ((byte2 & 15) << 2) \| (byte3 >> 6);
	if (isNaN(byte3))
	{
	enc4 = 64;
	}
	else
	{
	enc4 = byte3 & 63;
	}
	}

	outputStr += b64.charAt(enc1) + b64.charAt(enc2) + b64.charAt(enc3) + b64.charAt(enc4);
	}

	return outputStr;
	}

	load.addEventListener('click', () => {
	logMsg("Fetching JPEG data from local storage...");
	localforage.getItem('world_img', function(err, value) {
	// Run this code once the value has been
	// loaded from the offline store.
	var image = document.getElementById("show_img");
	image.src = "data:image/jpeg;base64," + value;
	image.style.visibility = "visible";
	logMsg("JPEG image loaded.");
	});
	});
	</script>
	</body>
	</html>