Persist data between both sides of an anki flashcard.
While the following example explicitly shows the random number, it could instead be used internally to do many different things:
- choose one of several pictures (at random) - Maybe someone wants to learn the names of instruments from a picture depicting it; One of multiple views of the instrument could be shown, a different one in every review.
- reorder elements in the card - Shuffle the answers of a multiple choice question.
- ...
It could also be used completely different as well. To let the user input something on the frontside and use that same input on the backside for example.
This example shows how anki-persistence can be used to display the same random number on both sides of an Anki flash card. All of these images depict the same note! You can try it out yourself with this exported Anki deck.
Client | Front | Back |
---|---|---|
Web | ||
Android | ||
Android (card preview) | ||
iOS | ||
iOS (card preview) | ||
Mac | ||
Mac (card preview) | ||
Windows | ||
Windows (card type editor preview) | ||
Linux | ||
Linux (card preview) |
Note that Persistence is not available for Windows card type editor preview (Persistence.isAvailable()
returns false
), thus a default (0.4) is chosen.
<script>
// v0.3.0 - https://github.com/SimonLammer/anki-persistence/blob/54444f7b58de784c781dcc904f6ce559f7ce3ed2/script.js
if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){void 0==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return void 0==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){void 0==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],s=!1;"object"==typeof t&&(s=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,s){void 0==s&&(s=e,e=_defaultKey),t[_persistenceKey][e]=s},this.getItem=function(e){return void 0==e&&(e=_defaultKey),t[_persistenceKey][e]||null},this.removeItem=function(e){void 0==e&&(e=_defaultKey),delete t[_persistenceKey][e]},void 0==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return s}};for(var persistentKeys=["py","qt"],i=0;i<persistentKeys.length&&(window.Persistence=new Persistence_windowKey(persistentKeys[i]),!window.Persistence.isAvailable());i++);window.Persistence.isAvailable()||(window.Persistence=new Persistence_sessionStorage)}
</script>
{{Front}}
<div id="front"></div>
<script>
var number = 0.4; // Default to 0.4.
if (Persistence.isAvailable()) { // Check whether Persistence works on the client.
number = Persistence.getItem(); // Retrieve a previously stored number and override the default. (In case this is executed on the backside as well by {{FrontSide}})
if (number == null) { // If there was no number stored previously:
number = Math.random(); // 1. Create a random number and override the default.
Persistence.setItem(number); // 2. Store that number
}
}
window.front.appendChild(document.createTextNode(number)); // Print the number.
</script>
<script>
// v0.3.0 - https://github.com/SimonLammer/anki-persistence/blob/54444f7b58de784c781dcc904f6ce559f7ce3ed2/script.js
if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){void 0==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return void 0==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){void 0==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],s=!1;"object"==typeof t&&(s=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,s){void 0==s&&(s=e,e=_defaultKey),t[_persistenceKey][e]=s},this.getItem=function(e){return void 0==e&&(e=_defaultKey),t[_persistenceKey][e]||null},this.removeItem=function(e){void 0==e&&(e=_defaultKey),delete t[_persistenceKey][e]},void 0==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return s}};for(var persistentKeys=["py","qt"],i=0;i<persistentKeys.length&&(window.Persistence=new Persistence_windowKey(persistentKeys[i]),!window.Persistence.isAvailable());i++);window.Persistence.isAvailable()||(window.Persistence=new Persistence_sessionStorage)}
</script>
{{Back}}
<div id="back"></dv>
<script>
var number = 0.4; // Default to 0.4.
if (Persistence.isAvailable()) { // Check whether Persistence works on the client.
number = Persistence.getItem(); // Retrieve the previously stored number and override the default.
Persistence.clear(); // Clear the storage, so a new random number will be created on the next card.
}
window.back.appendChild(document.createTextNode(number)); // Print the number.
</script>
The note has two fields: Front
and Back
.
These are set to front
and back
respectively.
To use anki-persistense, follow these steps:
- Download the script from the latest release. We recommend using the minified version (
minified.js
) to save space in the anki card type. - Copy and paste the file contents between to the beginning of front and back side of the card type.
- Ensure that both script blocks are enclosed in
<script>
and</script>
.
This can be seen in the example setup.
Anki clients vary in their implementation and JavaScript can behave differently in each one. Therefore, check for availability before using other Persistence methods.
if (Persistence.isAvailable()) {
// do stuff
}
Other methods:
Name | Description |
---|---|
Persistence.clear() |
Removes all previously persisted key-value pairs. |
Persistence.getItem(key) |
Retrieves the data associated with the key. If no data is associated to the given key, null is returned. |
Persistence.getItem()) |
Retrieves the data associated with a default key. |
Persistence.setItem(key, data) |
Persists the key-value pair. |
Persistence.setItem(data) |
Persists the value using a default key. |
Persistence.removeItem(key) |
Removes the data associated with the key. If no data is associated to the given key, nothing happens. |
Persistence.removeItem() |
Removes the data associated with a default key. |
Some implementations of Persistence may use JSON.stringify and JSON.parse in the process of persisting and retrieving data.
Persistence.setItem
may persist data across cards, this should be stopped by calling Persistence.clear()
at the end of the backside. (If this gets called on the frontside's beginning instead, you cannot use anki's {{FrontSide}}
special field in the backside - because this would delete the persisted data)
Huge thanks to