Using localStorage for translations in my website instead of loading them every time i visit the page again

Testas Testauskas :

I have a function to loads translations to my website from ajax request, but I would like to make my code so it saves these translations , and later load it from localStorage instead of doing request again.

function lanText(text) {
    var urlPath = location.pathname.split("/");
    if ($.isEmptyObject(lan_obj) == true) {
        var keysString = lan_global_keys.join();
        if (typeof (lan_local_keys) != "undefined" && lan_local_keys !== null && lan_local_keys.length > 0
                && typeof (lan_local_module_name) != "undefined" && lan_local_module_name !== null) {
            var localKeysString = lan_local_keys.join();
            keysString = keysString + ',' + localKeysString;
        }
        $.ajaxSetup({async: false});
        var urlArray = '/' + urlPath[1] + '/' + urlPath[2] + '/ajax/a/text_array';
        $.post(urlArray, {t: keysString, mName: lan_local_module_name}, function(data) {
            try {
                lan_obj = $.parseJSON(data);
            } catch (e) {
                console.log(e.message);
            }
        });
        $.ajaxSetup({async: true});
    }

    if ($.isEmptyObject(lan_obj) == false) {
        if (typeof (lan_obj[text]) != "undefined" && lan_obj[text] !== null) {
            return lan_obj[text];
        } else {
            $.ajaxSetup({async: false});
            var url = '/' + urlPath[1] + '/' + urlPath[2] + '/ajax/a/text';
            var ret = null;
            $.post(url, {t: text, mName: lan_local_module_name}, function(data) {
                ret = data;
            });
            $.ajaxSetup({async: true});
            return ret;
        }
    }
}

How can I possibly make them save into localStorage?

CaptEmulation :

You have several options.

First off, you need to recognize a few pitfalls here. If you tell your website to store translations in local storage, then there may or may not be a way to update translations if they need to change in the future. In addition, what would happen if you updated the website and added translations? You may find yourself needing to hash the data in localstorage simply to ask the server if translations have changed.

Probably the strongest option is to inject the translations directly into the webpage as static data. That way no ajax request is required. This could require server side rendering so it is understandable if this is not an option.

If you insist on using local storage, then consider the following techniques for managing multiple pages using the same translation keys:

Use namespaces for all translation keys, e.g. page1:mName and page2:mName.
Use per page local storage. Rather than always saving translations for every page into the same local storage key, put each page into it's own local storage key

The code to save a string to localstorage is: