Updating CSS file at runtime, changing fontsize, background color and window size

Question

I want to give the user an option of changing font size, background color and window size at run time, ie after logging into system. The project contains multiple CSS files and is called in JavaScript files.

I have got this solution on Goggle but it raised some other questions:

Solution A: We can use the document.createElement function to create a new style element.

 var sheet = document.createElement('style')
 sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}";
 document.body.appendChild(sheet);

In this above statement it creates a CSS style sheet at that time, and later on we can remove style sheet in the same code. Switching between different style sheets based on user preference, we can set up multiple style sheets and enable only the ones that the current site visitor would want to view.

The questions I get here are:

1. What would happen to the created style sheet once the used logged out, will it stay in the cache?

2. If it stays on the cache, would there be multiple style sheets per user depending on the number of times they change the interface setting or just one per user?

3. How would this behave if the user is in incognito mode?

Or if someone can suggest any other feasible solution.

Answer 1

No, the created style sheet will not be cached.
In fact, since its created dynamically in your JS code, it will only exist while the page is open. Once the page is reloaded, or closed and reopened, the stylesheet will have to be created again.

There are of course various means to cache it, if you want to create such a feature yourself. You'll have to store it, retrieve it, recreate it, invalidate it on logout and manage all such functionality in your code.

Since there's no automatic caching functionality, incognito mode will behave just as it does with any other browser storage, ie not have access to anything stored outside of the current incognito session and anything stored in the current incognito session will vanish once the session is closed.