I have this issue that I ran into today. I am making a mini-cart for website, it is going to be shown on every page except for the actual cart.
Performance on site is kind of important, so I’ve decided to temporary cache current items in the cart in local storage to avoid unnecessary server side request to fetch same items on every single page load.
Since mini cart is not actually displayed on cart, It still listens for callbacks, e.g. when removing an item. The point is to reset cache or delete just that item from the cached copy.
The issue I am facing:
User ends up in cart page, which might clear the cache ( if user is in last step )
if I he navigates to some other page by clicking a link, it works fine – cache is cleared.
Problem is that if I use back button ( browser back button, mouse back button etc. ) user goes back to previous page and the changes I made in cart page ( clearing cache ) are reverted! ( even when I reload page )
So the question is:
How do I clear the local storage and avoid it being restored if I go back? At the same time having consistent behavior in other browsers.
This cache is nothing more but an item is local storage, it is updated when new item is added or removed. Clearing the cache would simply delete it (using localStorage.removeItem).
Given that the item is removed when trying this in IE8, it is safe to say that you are executing the correct code to remove the item. I would then have to say that this looks like it is a browser-related issue, where the browser retains the information when you go back to maintain a consistent user experience. This appears to be supported by the fact that navigating directly to the same link does not restore the deleted object.
If you are going through a process like filling a shopping cart this may not matter, so long as once you leave the back trail of visited pages that the cache is updated correctly. (i.e. item 1 in the cache is deleted on page B, returns when going back to page A but disappears when navigating to page D).
The other option you have is to simply use a server-side session storage mechanism. This is by far what I would do. One of the biggest mistake that I see programmers, especially on SO, making is that they assume that operation X is going to impact performance and try to avoid it. You cannot make any concrete statement about performance without benchmarking. It is very possible that your server-side will be quicker than your cilent side code at returning a couple session objects. Server-side session is a fantastic tool used by virtually every site on the net and it would be unfortunate to ignore it because of a misplaced assumption about how it will impact performance.