When using JavaScript (JS) to first add and then delete an image from the browser it was anticipated that the screen would render clear when leaving the page and then return using the back button.
Read also about Double Arraylist Java
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 closing the Delete Image button was used to remove the image that was 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 Imagebutton and the image will be removed - Click the
Link To Page Twobutton - 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 Onethe screen starts fresh without an image
Example of 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>Example of 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>Solution [option 1]
The most probable explanation is that the browser remembers last successfully loaded content – when changing the source into empty string the browser has “nothing” to cache so there is a chance the engine of the specific browser (or all of them) leaves the cache unchanged – try changing the source into something like “pixel image” in your deleteImage function like this:
theImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=';it will load a transparent 1x1px png and probably replace the cached image. …or use the cache controlling headers on the server – to tell the browser not to cache.
Solution [option 2]
In your delete function add this line: inputImageFile.value = '';
It looks like the input plays the role – the value is being cached – and when browser sets the value from cache – the ‘input’ event fires – and the script displays the image.