clearing browser cache react js

Question

I have an application running node.js in the backend and react.js at the front.

I have encountered a bug that happens when I log in as a admin, log out and immediately try to log back in as a customer without refreshing the page. When I do that the user logs into the admin account that was just logged out.

In my attempt to debug this issue i checked to see if my auth cookie was being removed successfully upon logout and it does. So what I checked was if the cache was interfering in the bug by not refreshing the page, just clearing the cache (Ctrl+Shift+R) and trying to log as user using the same steps. This works 100% of the time, which probably means that the problem is the browser cache.

I did some research and there is a way to "remove" cache by using meta tags like this:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

I wanted to make sure that not storing cache does not interfere in the performance of my app, and if it does I would like to know if someone knows a way to turn this around.

I think the important question is "why does clearing the browser cache solve the problem?" — Brian Thompson
– Brian Thompson, Commented Jul 23, 2021 at 18:11

Faisal Nazik · Accepted Answer · 2021-07-23 18:31:56Z

1

If you just want to clear-out complete cache data you can do this way .

const clearCacheData = () => {
    caches.keys().then((names) => {
      names.forEach((name) => {
        caches.delete(name);
      });
    });
    alert('Complete Cache Cleared')
  };

then return

    <div style={{ height: 500, width: '80%' }}>
      <h4>How to clear complete cache data in ReactJS?</h4>
      <button onClick={() => clearCacheData()} >
        Clear Cache Data</button>
    </div>

answered Jul 23, 2021 at 18:31

Faisal Nazik

2,9635 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Galt Over a year ago

Thank you very much. Will try implementing this.

Adel Over a year ago

This didn't work for me!

Oleksandr Sakun · Accepted Answer · 2021-07-23 19:41:07Z

0

Just clear your localStorage on logout: localStorage.clear() (place this code inside your "logout" function)

answered Jul 23, 2021 at 19:41

Oleksandr Sakun

4624 silver badges9 bronze badges

1 Comment

John Galt Over a year ago

I already do that, if you read it carefully I said the auth token was removed upon logout

Collectives™ on Stack Overflow

clearing browser cache react js

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related