Online Settings Persistence

[98h398hrpohpoai]

Hi! I absolutely love Bonjourr and use it across several browsers and devices.
I've deployed using the online method using nginx as a reverse proxy.
A question I have is whether there is anyway to maintain persistence across sessions?
My assumption is the data is stored via cookies and that it's currently not possible; however, would it be possible to write the config to the file system as changes are made so the page loads the same no matter which browser is used?

[victrme]

Hello @98h398hrpohpoai !

The online version is using localStorage and not cookies, which is fairly simple to get / update. However because of that, the settings are only accessible from the page. I can look into the File System API, but because of security reasons it is kind of hard to work with. So no promises !

In the meantime, you could add some sort of function in your server - maybe in PHP - that can store a text file, then add this script on top of main.js in index.html to store the settings every time you save:

<!-- index.html -->

<script>
  // Apply settings before Bonjourr does
  fetch("http://localhost:8888/somefunction/get").then(data => {
    for (const [key, val] of Object.entries(JSON.parse(data))) {
      localStorage.setItem(key, val)
    }
  })

  // Listen to changes and send them to your server
  window.addEventListener('storage', () => {
    fetch("http://localhost:8888/somefunction/set", {
      body: JSON.stringify(localStorage),
      method: "POST",
    })
  })
</script>

<script src="src/scripts/main.js" defer="defer"></script>

To get the settings from the console for reference:

// Get settings
JSON.stringify(localStorage)

// Update settings
for (const [key, val] of Object.entries("... your settings")) {
  localStorage.setItem(key, val)
}

Let me know if it helps !

[98h398hrpohpoai]

Thank you so much for this response--this is absolutely fantastic!
Looking at the function above, would there be a good way to write it to capture functions dynamically/any setting change, or would it need to be written per setting/function?
As I'm reading it now [particularly the listener block], it looks like each function would need to be specified individually?

And is there a donation link? This project absolutely deserves it. <3

[victrme]

Thank you for the kind words 🥲
You can donate at https://ko-fi.com/bonjourr if you want !

---

It doesn't look like it, but the listener above does listen for all changes ! You can test that by pasting this in the console and changing any option:
( this event only works in online, not on extensions )

// in console
window.addEventListener('storage', () => {
  console.log(`Updated settings: ${new Date()}`)
})

// logs:
// Updated settings: Mon Nov 27 2023 15:51:40 GMT+0100 (Central European Standard Time)
// Updated settings: Mon Nov 27 2023 15:51:44 GMT+0100 (Central European Standard Time)
// ... 

When you get localStorage from the page, everything used by Bonjourr (settings & various caches) is in this object. Again, in the console, you can verify this:

// in console
localStorage

// logs:
// Storage {
//   unsplashCache: [...],
//   quotesCache: [...],
//   lastWeather: {...},
//   bonjourr: {...}
// }

Which means that this sends a request to your backend with all of Bonjourr's data as a string:

POST /store

fetch("http://localhost:8888/store", {
  body: JSON.stringify(localStorage),
  method: "POST",
})

If your backend at /store writes a bonjourr_data.txt file at the root, you can then get it with:

fetch("http://localhost:8888/bonjourr_data.txt")

Hopefully doing all of that should work !

[98h398hrpohpoai]

Thanks so much for following up!
I get why I was confused now.
I'm not really clear on how I would write that function.
I don't have much experience in php, but mainly in just in html/css (with a very small splash of java and python).