patternjavascriptMinor
Use local storage event
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);
```
"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
Why? Global
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:
Second. The name
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.