HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Use local storage event

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
localusestorageevent

Problem

I use the following code which is working OK to register and emit event for local storage on the browser. It will be great if you can give me some ideas on how to improve it for production use since I'm fairly new to JS.

```
"use strict";
function lsHelper() {
let status = "available";
let timeout = 5000;

//Register a function by its name, itself (callback) and the needed time span for the check cycle
this.RegisterLocalStorageFunction = function(name, callback) {

//Set local storage items for function and its result
resetFunction(name);

//Setting the event
window.addEventListener('storage', function(e) {
//Getting the params or eventually just the status

//Call the function if params are set and reset all
if (e.key === name && e.newValue != status) {
let result = callback(e.newValue);
//Set result
localStorage.setItem(name + "Result", result);
//Reset call
localStorage.setItem(name, status);
}
});
}

this.CallLocalStorageFunction = function(name, params, callback) {
//Check if the function is already called
if (localStorage.getItem(name) == placeholder
&& localStorage.getItem(name + "Result") == status) {

//Call remote function
localStorage.setItem(name, params);

//Define timeout and event for future usage
let timeout = {};
let storageEvent = {};

//Check in interval for result
storageEvent = function(e) {
//Check wheter the result is set
if (e.key == name + "Result" && e.newValue != status) {
//Call callback with results
callback(e.newValue);

Solution

first of all remove your global use strict.

Why? Global use strict declarations can lead to big fails in your software.

From Mozilla website:


This syntax has a trap that has already bitten a major site: it isn't possible to blindly concatenate non-conflicting scripts. Consider concatenating a strict mode script with a non-strict mode script: the entire concatenation looks strict! The inverse is also true: non-strict plus strict looks non-strict. Concatenation of strict mode scripts with each other is fine, and concatenation of non-strict mode scripts is fine. Only concatenating strict and non-strict scripts is problematic.

So what you can do is to use the module pattern:

var lsHelper = (function() {

    "use strict";
    let status = "available";
    let timeout = 5000;

    return {
       //Register a function by its name, itself (callback) and the needed time span for the check cycle
        RegisterLocalStorageFunction: function(name, callback) {

            //Set local storage items for function and its result
            resetFunction(name);

            //Setting the event
            window.addEventListener('storage', function(e) {
                //Getting the params or eventually just the status

                //Call the function if params are set and reset all
                if (e.key === name && e.newValue != status) {
                    let result = callback(e.newValue);
                    //Set result
                    localStorage.setItem(name + "Result", result);
                    //Reset call
                    localStorage.setItem(name, status);
                }
           });
       },
        CallLocalStorageFunction: function(name, params, callback) {
            //Check if the function is already called
            if (localStorage.getItem(name) == placeholder &&
                localStorage.getItem(name + "Result") == status) {

                //Call remote function
                localStorage.setItem(name, params);

                //Define timeout and event for future usage
                let timeout = {};
                let storageEvent = {};

                //Check in interval for result
                storageEvent = function(e) {
                    //Check wheter the result is set
                    if (e.key == name + "Result" && e.newValue != status) {
                        //Call callback with results
                        callback(e.newValue);

                        //Reset result in local storage
                        localStorage.setItem(name + "Result", status);

                        //Dismiss listener and timeout
                        clearTimeout(timeout);
                        window.removeEventListener('storage', storageEvent, false);
                    }
                }

                //Add listener to event
                window.addEventListener('storage', storageEvent);

                //Start timout to cancel listener if no result is set, hence no remote function was called
                timeout = setTimeout(function() {
                    //Dismiss interval
                    clearTimeout(timeout);
                    //Clean up
                    window.removeEventListener('storage', storageEvent, false);
                }, timeout);
            }
        },

        //Reset local storage values
        resetFunction: function(name) {
            localStorage.setItem(name, status);
            localStorage.setItem(name + "Result", status);
        }
    };
})();


Second. The name lsHelper does not tell what the function does. I think that localStorageHelper is a better name.

Code Snippets

var lsHelper = (function() {

    "use strict";
    let status = "available";
    let timeout = 5000;

    return {
       //Register a function by its name, itself (callback) and the needed time span for the check cycle
        RegisterLocalStorageFunction: function(name, callback) {

            //Set local storage items for function and its result
            resetFunction(name);

            //Setting the event
            window.addEventListener('storage', function(e) {
                //Getting the params or eventually just the status

                //Call the function if params are set and reset all
                if (e.key === name && e.newValue != status) {
                    let result = callback(e.newValue);
                    //Set result
                    localStorage.setItem(name + "Result", result);
                    //Reset call
                    localStorage.setItem(name, status);
                }
           });
       },
        CallLocalStorageFunction: function(name, params, callback) {
            //Check if the function is already called
            if (localStorage.getItem(name) == placeholder &&
                localStorage.getItem(name + "Result") == status) {

                //Call remote function
                localStorage.setItem(name, params);

                //Define timeout and event for future usage
                let timeout = {};
                let storageEvent = {};

                //Check in interval for result
                storageEvent = function(e) {
                    //Check wheter the result is set
                    if (e.key == name + "Result" && e.newValue != status) {
                        //Call callback with results
                        callback(e.newValue);

                        //Reset result in local storage
                        localStorage.setItem(name + "Result", status);

                        //Dismiss listener and timeout
                        clearTimeout(timeout);
                        window.removeEventListener('storage', storageEvent, false);
                    }
                }

                //Add listener to event
                window.addEventListener('storage', storageEvent);

                //Start timout to cancel listener if no result is set, hence no remote function was called
                timeout = setTimeout(function() {
                    //Dismiss interval
                    clearTimeout(timeout);
                    //Clean up
                    window.removeEventListener('storage', storageEvent, false);
                }, timeout);
            }
        },

        //Reset local storage values
        resetFunction: function(name) {
            localStorage.setItem(name, status);
            localStorage.setItem(name + "Result", status);
        }
    };
})();

Context

StackExchange Code Review Q#145403, answer score: 3

Revisions (0)

No revisions yet.