When I used JS to first add and then delete an image from the browser I anticipated that the screen would render clear when I left the page and then returned using the back button. However when I returned the image was once again present on the screen. This happened despite the fact that the screen is set to start clear, i.e. <img src="">
and before I left I used the Delete Image
button to remove the image that I had added. For some reason the image was there again.
How to recreate this behavior:
- Open Page 1
- Choose an image file from your system
- JavaScript will set the value of
<img src="">
to your image and display it - Click the
Delete Image
button and the image will be removed - Click the
Link To Page Two
button - Use the back button on your browser and when you return the image will be on the screen again
- If instead of the back button you return with
Link To Page One
the screen starts fresh without an image
page-one.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Page One</h1>
<p><a href="page-two.html">link to Page Two</a></p>
<p><img src="" id="theImage"></p>
<p><input type="file" name="imageFile" accept=".gif,.jpg,.png" id="inputImageFile"></p>
<button id="theButton">Delete Image</button>
<script>
let theImage = document.querySelector('#theImage');
let inputImageFile = document.querySelector('#inputImageFile');
let theButton = document.querySelector('#theButton');
inputImageFile.addEventListener('input', imageUpload);
theButton.addEventListener('click', deleteImage);
function imageUpload(e) {
let uploadedFile = e.target.files[0];
let forViewing = new Image();
forViewing.src = URL.createObjectURL(uploadedFile);
theImage.src = forViewing.src;
}
function deleteImage() {
theImage.src = '';
}
</script>
</body>
</html>
page-two.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Page Two</h1>
<p><a href="page-one.html">link to Page One</a></p>
</body>
</html>
Delete Image
button before I left the screen and the image was deleted. If the cache is the problem why doesn't it remember I started with an empty screen, added an image, deleted the same image and then left the screen while it was empty? If I left without an image shouldn't it return without an image?