Use localStorage for storing stettings

[SuperPhatArrow]

Hi @benbusby

I heard you on Opt Out talking about looking for another way to store user config. I would suggest localStorage as a better alternative that will persist after a user's web extension clears their cookies. It is a simple key value store, where both keys and values are strings but I have used it in the past to store stringified JSON which can be parsed into an object on page load and user settings applied based on the object. Or better, make it a Class that will save itself on any change.

You can also use JS to encode it as query parameters before changing Whoogle instance with farside. I would not suggest using the URL query params for and kind of persistent storage. There are already privacy extensions that will remove them if they are interpreted as tracking or privacy leaking.

Of course this is no help to people who disable JavaScript in their browser, but I guess they will have persistent storage issues anyway.

[benbusby]

Thanks for the suggestion, I'll look into that. A couple initial thoughts though:

Since the majority of config settings are only relevant to the back end, I'm curious how localstorage would reliably communicate these settings to the server in the event that the user's cookies are cleared and they attempt to start a new search with a new session. I suppose it would be possible to encode it into query params on a per search basis, but that wouldn't work for things like the OpenSearch template, which is generated server side.

The server does already support naming and loading custom configurations though, so there could be a solution there. I was thinking that as long as the user saves their config in the same session that they perform the initial load of the OpenSearch template, the server could fill in a simple &config=<config name> for the search URL. That wouldn't help with Farside instances obviously, but the named config could still just be deconstructed into simple query params in that case.

[SuperPhatArrow]

I must admit I haven't looked into your code at all and don't know how it works. That is why I just started a discussion rather than create an issue.

I'm curious how localstorage would reliably communicate these settings to the server in the event that the user's cookies are cleared and they attempt to start a new search with a new session.

This could be done quite simply in a few ways that I can think of immediately. Pass the info to the server

1. in the header of each request to the server
2. as a cookie
3. in the body (as I recall you said you use to reduce logging by instance hosts).

JavaScript can put the data you want to communicate to the server in any of these places. localStorage persists through different sessions and is domain specific (so secure from other sites snooping). It will usually persist for months (YMMV) between site visits, but different browsers have different rules built in for how long they keep data.

When the page loads, JS will check for data in localStorage and depending on your preferred method above, can reset a cookie that has been removed or just send data in each request.

If you need this data sent to the server on the very first GET request to the site (IE user navigates to whoogle.example.com) and the user has already cleared cookies, then the only way around that is for JS to retrieve the data from localStorage, check that it is missing, replace the cookie on page load, and then reload the page, which most users would barely notice.

If you don't need it on this initial page load request and only on subsequent POST requests then don't bother with cookies at all and put it in the body of the POST

I hope I am not misunderstanding you.

[SuperPhatArrow]

as a quick example of what I mean, something like so for cookie replacement:

let settings = {
  // default settings object
  aSetting: true,
  theme: 'darkMode',
  myCookie: 'test1=Hello; SameSite=None; Secure',
};

// use to change a setting
function changeSetting(key, value) {
  settings[key] = value;
  try {
    localStorage.setItem('mySettings', JSON.stringify(settings))
  } catch (error) {
    console.error(`Unable to save settings after changing ${key} to ${value}`, error);
  }
}

// to be called on page loaded
function setup() {
  try {
    // try to retrieve saved settings from localStorage
    settings = JSON.parse(localStorage.getItem('mySettings'));
  } catch (error) {
    // either nothing saved because new user or localStorage deleted
    // console.log(error) // or do nothing?
  }
  // check for old cookie
  const cookies = document.cookie;
  const myCookieIsThere = cookies.includes('test1='); // boolean
  // if no cookie, add it
  if (!myCookieIsThere) {
    document.cookie = settings.myCookie;
    // uncomment to force reload
    // window.location.reload(true);
  }
}

window.addEventListener('DOMContentLoaded', setup);