-1

I have preview like logic where you can preview changes in a HTML page via a window.open() and be able to log in etc but the issue is I want to ensure that the new windows local storage is clear on only the window so a login is required every time a new preview window is open.

Because there is data which is required to maintain the session in the portal where am executing the code to open the new window - if I run localStorage.clear(); it will mean a login will be required in the portal and the window every time that window is opened - which is what I do not want to do, I only want to ensure that is only required for the newly opened window.

I have looked at various ways to handle this here and I have had no joy thus far.

Effectively what am looking to do is the following:

  1. Open window.
  2. Clear local storage.
  3. Reload the window.

An example of some code I have as is:

  return setInterval(() => dispatch(getPreviewStatus(requestData)).then(res => {
    if (res[dataPreview.propertyNames.status] === dataPreview.status.completed) {
      const windowFeatures = 'location=yes,scrollbars=yes,status=yes';
      let window = window.open("www.testing.com", '_blank', windowFeatures);
      let preview = window.open(URL, '_blank', windowFeatures);
      let script = document.createElement('script');
      script.textContent = 'alert(\'JS is running\');';
      preview.document.head.appendChild(script);
    }
  }), 5000);

Is it possible to accomplish this via window.open - I did try the top solution here: Running Javascript in new window.open but with no luck - this is what ave tried script.textContent = 'localStorage.clear(); location.reload();';

Many Thanks!

EDIT 1: I am opening the window in the same domain its being called from.

EDIT 2: I am opening the window and can execute the alert - but if try to clear localStorage.clear(); it clears the page that opened the window and the location.reload(); doesn't reload the window.

Studento919
  • 625
  • 2
  • 15
  • 44
  • Did you tried `document.ready` on the window? – Developer Oct 17 '19 at 16:04
  • In this example, do you control `testing.com`? – grooveplex Oct 17 '19 at 16:04
  • @grooveplex yes I control the domain – Studento919 Oct 17 '19 at 16:05
  • Can you modify the content (scripts) on the opened window? I would then suggest to provide a parameter that is interpreted by the opened window and let it handle the clear/reload itself. – Thomas Oct 21 '19 at 09:17
  • 2
    _“Effectively what am looking to do is the following: […]”_ - and that is supposed to achieve what, exactly? Why don’t you just clear localStorage from the parent window, before you open the popup? localStorage is just tied to the origin, and not a specific tab or window instance to begin with - so why does it have to happen from within the popup in the first place? This whole question feels rather [XY-problem-y](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) … – 04FS Oct 21 '19 at 09:21
  • @04FS it has to clear in the window - I have preview like logic where you can preview changes in a HTML page and be able to log in etc but the issue is I want to ensure that the windows local storage is clear on only the window so a login is required every time a new preview window is open. I may have to try and pass a parameter instead to trigger what I want to happen as per the suggestion in the comments. – Studento919 Oct 21 '19 at 09:27
  • That still does not explain why it would have to happen _inside_ the popup, and not _before_ you open the popup. Again, `localStorage` is _shared_ between all of your pages from the same origin - so how would it effectively make any difference, if you did this from “inside” the popup, as opposed to doing it in the parent window just before you open the popup? – 04FS Oct 21 '19 at 09:31
  • Because there is data which is required to maintain the session in the portal where am executing the code to open the new window - if I run `localStorage.clear();` it will mean a login will be required in the portal and the window every time that window is opened - which is what I do not want to do, I only want to ensure that is only required for the newly opened window. – Studento919 Oct 21 '19 at 09:37
  • 1
    But localStorage gets _shared_ across all windows from the same origin! It should not matter _where_ you clear it, whether you do that in the parent or the popup - it will get cleared for _both_ either way. After clearing it “in” the popup, any values you had stored in there should not be available inside your parent window for reading any more either. They might become available again, if you login inside your popup now, and write the result of that into localStorage again. But that _still_ doesn’t explain how it would make any difference, _where_ you cleared it to begin with. – 04FS Oct 21 '19 at 10:02
  • @04FS I understand in short - what am looking to do as you said will make no difference, I need to look at an alternative way to solving my issue. – Studento919 Oct 21 '19 at 10:32
  • What about sessionStorage? You could place data required for the portal in localStorage, and login information in sessionStorage. In each new window, login will be required, but other data is still available – Bernardo Dal Corno Oct 22 '19 at 14:41
  • Another approach would be to put in localStorage how many windows are logged in. If a new window is open, it checks if count>1, which means is a popup, so it should require login. When the portal itself is opened, count = 0 so it can retrieve login info to remember last session and dont require login. You should increment when login ok, and decrement on window close. – Bernardo Dal Corno Oct 22 '19 at 14:56
  • Is this a static html file or is it being served via a server? – MilesZew Oct 24 '19 at 17:43
  • Have you considered session storage? Also, I believe that the cookie session may be stored on the server-side. – Asolace Oct 25 '19 at 20:12

2 Answers2

0

When you open a new window, the return value is the reference to the new window. This means that you can access native functions on that window. For example, you can run 

  const windowFeatures = 'location=yes,scrollbars=yes,status=yes';
  let win = window.open("www.testing.com", '_blank', windowFeatures);
  console.log(win.localStorage);
  win.localStorage.clear();
  console.log(win.localStorage);
  win.location.reload();

As you can see, I'm asking to access the local storage and the location of the window we opened. If you were to copy these lines and run them in the developer tools of the browser, you would see them in action.

Note that you'are already doing this to insert the script that runs the alert.

preview.document.head.appendChild(script);

Note also that in your code, you used the name 'window' which is a reserved word.

Ilank
  • 57
  • 8
0

Why don't you use session storage instead of local storage?

As per the Mozilla documentation:

The difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.

  • A page session lasts as long as the browser is open, and survives over page reloads and restores.
  • Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
  • Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
  • Closing a tab/window ends the session and clears objects in sessionStorage.

So you could do something like the following:

1) Open a new window and append a url parameter such as isPreview ('www.test.com?isPreview')

2) When opening the new tab, if the isPreview parameter is present in the URL, look for authentication token in session storage rather than in local storage. Because you just opened a new windows, session storage will be empty and user will be prompted to login.

This way every time you open a preview window, users will need to authenticate but on the originating window the user will remain logged in

Aaron Ullal
  • 4,855
  • 8
  • 35
  • 63