General Script Making Questions

So this is aimed at any script makers about programming scripts specifically. I’ve been working on a script and it’s quite large and requires a lot of images. Where is the best place to upload images to in order to use with scripts?

And another question I just want to check, is there an easy way to store/cache information client-side? This feels like an obvious yes, but so far I haven’t touched WK yet and I just want to know ahead of time how I’d go about doing it.


Check the WKOF cache feature. That did the trick for me.


I think it’s also fine to upload it somewhere else (like imgur) and just link it. The browser will cache it automatically. For some forum scripts I have just uploaded images directly to Discourse and used those links. You can also convert smaller images into base64 strings

1 Like

If you’re using a source control system like GitHub to back up your script, you can also leverage it to directly link to the image files. There might be better ways, but that’s the first thing that comes to mind.

For caching, if you’re just talking about basic information like user preferences you can use localStorage. It really depends on what you’re trying to do.


Btw, this depends a lot on what sorts of images you need. Like Kumirei said, smaller images (I’d say up to like 100x100 should be around the limit) can go into base64 and that shouldn’t take up a lot of space (it’s width x heigth x ~5.5 is how many characters it will take up).
If you need full blown, big images, any sort of cdn should work, uploading to github then linking to the raw file is an option, though it’s kinda icky with greasyfork, because you need to link to a specific commit and it’s a bit messy, but it works.
If you need icons, try to first replace them with font awesome icons. WK is using font awesome 3 or 4 if I’m not mistaken, just try around and see if an icon you want works or not.

Like @prouleau said, wkof cache, though I often find that kinda slow and if you’re not using other functionality, it’s just a hassle. Instead a very simple thing you can do is storing information in localstorage. This is done by doing:

window.localStorage.setItem("", JSON.stringify(thingToStore));
const cached = JSON.parse(window.localStorage.getItem(""));

you need the part to avoid conflicts, and you need the JSON.stringify/parse part because localStorage only handles strings.
This has a size limit of 5MB in total, so don’t expect to store like images in it, but for settings or similar, it’s imo a better option than relying on wkof.


I disagree. WKOF provides for easy UI for settings and the storage of settings is built-in wkof. With local storage you will have to do the settings UI and storage by hand.

1 Like

I’m mainly not talking about settings with settings panels, rather very simple stuff, like toggle buttons or the like. For larger stuff, sure, wkof works better. (Though I use my own solutions for speed and because I make them blend into wanikani better, but that’s a lot of work)


I believe you. I have found that even for simple stuff like toggle buttons WKOF simplifies the task significantly. It automates the placement of the toggle in a dedicated setting dialog and it automates the placement of the dialog startup in a setting menu.

In my opinion both the setting dialog and setting menu blend good enough with Wanikani and speed is not a problem for these features.


Another option is IndexedDB. I don’t have an experience of using it directly, but a wrapper should work.

// ==UserScript==
// @name         New Userscript
// @namespace
// @version      0.1
// @description  try to take over the world!
// @author       You
// @require
// @grant        none
// ==/UserScript==

(function() {
    'use strict';


LokiJS with IndexedDB adapter, for example, should be no different.

Another thing about localStorage, is that it strictly has to by a String (or at least serializable); but for Dexie above, I have stored a Set before. (It can also store a Blob in Dexie docs.)

That’s what wkof uses behind the scenes

Technically all objects are serializeable, you just need to hydrate them after deserializing

You need to figure out how to serialize as well. e.g. JSON.stringify(new Date()) and JSON.stringify(/\s+/g). (It might be possible to hydrate JSON.stringify(new Date()), but you need to remember the pre-storage format.)

Also, thinking about serialization / deserialization is yet another code to maintain. unless you // @require something.

Okay I totally thought you were making a joke about cereal, I have zero clue what any of this means

Usually converting objects to text or binary. Sometimes “marshal” is used (with some differences).

1 Like

Tl;dr, after you serialize and deserialize an object, it will lose all it’s assigned functions, so you can’t call any on it. So you need to set it’s prototype, and that’s called hydration. The big issue is that you need to do this recursively as far as I’m aware


I want to thank everyone for helping me, my project has evolved past being a Wanikani script so help with where to store images was not necessary :joy: .

localStorage was all I needed for caching data since it’s just a few bits of information.