Difference between Persistence and sessionStorage/localStorage

Anki Development
1

In some places, I see people using the latter, in some places I see people using the former. What is the difference between these two? Is either one fundamentally faster/more convenient?
Also, when should Persistence/localStorage/sessionStorage be used?

1 Like
2

NOTE: i don’t use ios, so idk about AnkiMobile

All these persistence things are part of web browser’s APIs, specifically the web storage API. All browsers have it, even on android, ios, and perhaps surprisingly, Anki too. Anki desktop uses Qt WebEngine, while Ankidroid uses Android’s Webview both of which integrates Chromium.

If you are interested in the actual technical differences, the quick explanation is that sessionStorage is destroyed/cleared when the browser session ends. The point of using these storages is usually to:

  • pass data from the front to the back side of a card. Ideally, global variables persist but that isn’t the case in AnkiDroid. So storage API is the workaround. AnkiDroid might change to become closer to Anki desktop though.
  • preserve data across an anki study session throgh localStorage. imo, this is a much rarer use case but very powerful. maybe you can use it for template preferences, idk. e.g. settings for font size, or dark mode inside the card template, or change color themes.

You can just skip anki-persistence if you want. previously, old anki desktop versions prevented storage APIs so this library was made to workaround having two different methods to persist data in Anki desktop and AnkiDroid. one with window global variables, one with storage API. but now that is no longer true, so you could just use storage APIs in all Anki clients. or if you don’t care, just use global variables and it’ll work in Anki desktop and AnkiWeb (but not AnkiDroid!).

Addendum

Outdated information

localStorage doesn’t work on AnkiDroid. To solve this, you may be interested in anki-storage. It does this by communicating data with a localStorage from an <iframe> through postMessage() (abstracted through comlink, another library). It’s important to note that the <iframe> must load a website to bind localStorage with an origin, so it loads the author’s (ikkz) own website https://anki-storage.pages.dev. This might not be desired, but you can use your own website with the same code as in the repo. The key info here is that the localStorage binds to that single origin. The problem on AnkiDroid that prevents this is that it uses dynamic ports meaning page’s port is different on every new session, thereby losing the origin and localStorage once the session ends (much like sessionStorage).

EDIT: localStorage just doesn’t work on Anki desktop. i suppose Anki prevented writing such data to disk. i never got any ideas on what to use this for, so i never really pay much attention to it.

2 Likes
3

When you say browser session, what exactly is that in Anki? Me clicking study and then until all the cards in the queue get empty, me studying that one card or me opening Anki?

What all changes would I need to make to go from Persistence to using the storage APIs (I am unfamiliar with the latter, haven’t ever used it properly)?

1 Like
4

This depends on the Anki client. luckily, to my knowledge all of them clears sessionStorage when you close the application (maybe AnkiMobile too?). Here’s a simple template you can tes (i’m using a log element because i want to check this quickly on other Anki clients):

{{Front}}

<pre id="log" style="font-size: 10pt"></pre>

<script>
  var log = document.querySelector('#log');
  var message = sessionStorage.getItem('myMessage');
  if (message === null) {
    log.innerHTML += 'No value stored in sessionStorage. Will initialize a new one.\n';
    sessionStorage.setItem('myMessage', 'Hello world!');
    message = sessionStorage.getItem('myMessage');
  }
  log.innerHTML += message + '\n';
</script>

Just treat sessionStorage like a mapping or dictionary or key-value store. don’t forget to refer to MDN about the topic (i already linked it above).

2 Likes