til/posts/2023-11-27-posts.md

---

title: newWindow storage description: Today I learned that you can use LocalStorage across multiple windows. slug: newwindow-storage <!--- authors:

• name: David Windham title: Something Else url: https://davidawindham.com image_url: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg --> tags: [js, webgl, threejs] image: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg hide_table_of_contents: true ---

Today I learned that you can use LocalStorage across multiple windows.

☝🏼 top video by Bjørn Staal ₁

I could imagine a use case like some authentication and/or confirmation windows that open could have a subtle graphic reference to the origin window. Otherwise it's just fun and that's why I like it. Here's some example code from the repo:

constructor ()
{
  let that = this;

  // event listener for when localStorage is changed from another window
  addEventListener("storage", (event) => 
  {
    if (event.key == "windows")
    {
      let newWindows = JSON.parse(event.newValue);
      let winChange = that.#didWindowsChange(that.#windows, newWindows);

      that.#windows = newWindows;

      if (winChange)
      {
      if (that.#winChangeCallback) that.#winChangeCallback();
      }
    }
  });

  // event listener for when current window is about to be closed
  window.addEventListener('beforeunload', function (e) 
  {
    let index = that.getWindowIndexFromId(that.#id);

  //remove this window from the list and update local storage
    that.#windows.splice(index, 1);
    that.updateWindowsLocalStorage();
  });
}

I found some other examples floating around out there too₃.

---

1. Bjørn Gunnar Staal - X - https://twitter.com/_nonfigurativ_/status/1722543833408286927
2. Bjørn Gunnar Staal - Github - https://github.com/bgstaal
3. Momcilo Popov - Fun with Sockets - https://github.com/Momciloo/fun-with-sockets