Use local storage event

Question

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);
 //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
 function resetFunction(name) {
 localStorage.setItem(name, status);
 localStorage.setItem(name + "Result", status);
 }
 };

Answer 1

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.

• Jenny M: Thanks, two questions 1. before to initiate I use in other file let lsf = new lsHelper(); how I should init it after you changes ? 2. inside the code itself I everything looks OK or I can improve it ?
• Jenny M: Please ignore the first issue I was able to solve it, in addition there is a elegant way to avoid the global var like timeout?
• Iury Alves de Souza: I don`t understand clearly why do you need the timeout.