Reading a sessionStorage property and creating an if statement - javascript

So, I want to read a value from sessionStorage. I know how to do this, but then I want to do something like this:
function whiteSet() {
if (// condition: what the heck would I put here?) {
const color = localStorage.getItem('theme');
//if the value 'theme' is equal to 'aluminum' then:
document.getElementById("headerbar").style.backgroundImage = "url(images/themes/aluminum.png)";
} else {
document.getElementById("headerbar").style.backgroundImage = "url(images/themes/galaxy.png)";
};
I don't really know what to do :/
If an answer already exists for this question, I have already tried finding it and failed.

Just take it step by step. First you're reading the value out of local storage and putting it in the variable 'color', then you need to decide what to do based on what value you read out. So instead of starting out with an if statement, get color first and then the conditional tests against its content:
function whiteSet() {
const theme = localStorage.getItem('theme');
if (theme === "aluminum") {
document.getElementById("headerbar").style.backgroundImage = "url(images/themes/aluminum.png)";
} else {
document.getElementById("headerbar").style.backgroundImage = "url(images/themes/galaxy.png)";
};
}
(Personally, since you're storing it in a localStorage key named "theme", I'd name the variable "theme" too instead of "color" just to avoid confusion; but that's more of a coding style thing than a requirement for it to work.)

Related

Check if certain value exist in localStorage

I am trying to display a div conditionaly based on if a value exists in localStorage:
So here is an example the values present in localstorage for the key "elementor":
Key = elementor
Value = {__expiration: {}, pageViews: 2, popup_times: 1, popup_disable: true}
How to write a conditional to check if popup_disable: true is present or not?
Thanks!
Just like you would with any other object.
local_storage_value = localStorage.getItem(key)
if (local_storage_value.popup_disable) {
...
}
This checks if popup_disable is set to true, but doesn't check if the key exists in your localstorage.
if("popup_disable" in local_storage_value){
...
}
This checks if the key is present.
Thanks for making me look stupid #alex067 and #epascarello... but most your questions/answers did not make sense!
Obviously am not expert on this thus am here but I figured it out and super simple. So just had to JSON.parse the key and then look for if the popup_disable is in the value like this:
var popupDisable = JSON.parse(localStorage.getItem('elementor'));
if(popupDisable.hasOwnProperty('popup_disable')){
alert('yes');
} else {
alert('no');
}

How can I detect when a variable changes value in JavaScript?

Before I start, I'd just like to say that there are already answered questions on this topic, and I looked them up - but because I'm still somewhat of a beginner, I can't really figure out the answer as it's too complex for me. So I wanted to give my own example, a dead simple one, and try to understand based on that.
Essentially what I want to do is run a function when an already existing variable, with a defined value, changes its value. Something like this:
var testVar = 5;
function letMeKnow() {
console.log("The variable has changed!);
}
What I want is, when I go to the console and type, say testVar = 7, I want the letMeKnow() function to run, and print something out in the console. More specifically, I want JavaScript to detect that the variable has changed, and run the function automatically. I know that this used to be possible with Object.observe() or Object.watch(), but since those are deprecated I suppose that I have to use getters and setters to achieve this. My question is, how would I do that for this example, keeping it as simple as possible?
Thanks!
A simple example using getter/setter can be like:
var obj = {
value: '',
letMeKnow() {
console.log(`The variable has changed to ${this.testVar}`);
},
get testVar() {
return this.value;
},
set testVar(value) {
this.value = value;
this.letMeKnow();
}
}
console.log(obj.testVar)
obj.testVar = 5;
console.log(obj.testVar)
obj.testVar = 15;
console.log(obj.testVar)

javascript: setting default value with IF statement instead of OR

I'm only sharing a small bit of code because there is so much going on, and I hope this is enough to answer my question.
I have some existing JS where a value is determined with an OR statement and I think I need to convert that to an IF statement. The final output is currently giving me both values if they both exist, and I only want "question" where both "question" and "name" values exist.
var question = new fq.Question(questionData.answerId, topicId,
questionData['question'] || questionData['name'],
questionData['text']);
Instead of using the OR operator (answerData['question'] || answerData['name']), I'd like to do something similar to the following:
if (questionData['question'] is undefined) {
use questionData['question'];
} else {
use instead questionData['name']
}
But, I don't know how I might accomplish such a statement within the () in the existing code pasted above. The name variable/value is always present, so there's no risk in defaulting to that. Question is only defined some of the time. And I don't ever want both appearing.
This is probably outside of the scope of my query here, but to fill in a little more detail, this code eventually outputs JSON files for topics and questions. Topics only have names values, and questions have both names and questions, but I only want the questions json to include questions values, not names. I'm pretty sure this is the key part in all of the JS to determin
Create a function and get value from there.
Need to remember scope of function:
Example Snippet:
var that = this;
var question = new fq.Question(questionData.answerId, topicId,
that.getValue(),
questionData['text']);
function getValue() {
if (questionData['question']) { //null and undefined both are false
return questionData['question']
} else {
return questionData['name']
}
}

Variable Dependency with knockoutJS

I'm building an application with KnockoutJS with a component that essentially acts as a sequential spreadsheet. On different lines users may define variables or use them to represent a value.
So for example
x =2
x //2
x = 4
x //4
I have this working in the straightforward case of continuing adding new lines. The output function for each line checks and iterates backwards to see if the variable was ever defined previously. If it was it uses the first example it finds and sets that as the value. This works when initially defining the lines, and also works when you edit a line after a previous line has changed.
However, I would like variables to update if a previous definition of that variable has changed, been removed, or been added. That behavior does not exist right now. I have tried adding my own custom dependency handling code using a map to track the variables, but it badly impacted performance. I would like to tap into Knockouts dependency management to solve this, but I'm not sure of the best way to do so. Here is a brief summary of my code structure, I would be happy to add more detail if needed.
calcFramework is the view-model object I bind to the map. It consists of an observable list of Lines, a varMap, and other unrelated properties and functions
Line is a custom object. The relevant code is below
var Line = function (linenum,currline) {
var self = this;
self.varMap = {};
self.input = ko.observable("");
self.linenum = ko.observable(linenum);
self.lnOutput = ko.computed({
read:function(){
return outputFunction(self,self.input());
},
write:function(){},
owner:self
});
};
function outputFunction(self,input) {
try{
var out = EQParser.parse(input,10,self);
return out.toString();
}
catch(ex){
//error handling
}
}
Line.prototype.getVar = function (varName, notCurrentLine) {
if(typeof varName === "undefined"){
return null;
}
//Actually don't want ones set in the current varMap, only past lines
if(varName in this.varMap && notCurrentLine){
return this.varMap[varName];
}
if (this.linenum() > 0) {
var nextLine = calcFramework.lines()[this.linenum() - 1];
return nextLine.getVar(varName,true);
} else {
//eventually go to global
return calcFramework.varMap[varName];
}
};
Line.prototype.setVar = function(varName,value){
this.varMap[varName] = value;
};
SetVar and getVar are passed to eqParser, which gets the value of the expression, calling those functions as needed if a variable is referenced. So the variable value is not explicitly passed to the function and thus knockout does not view it as a dependency. But I'm not sure how I would pass the variable as a parameter without traversing the list every time.
So my question is, given this setup, what is the best way to track changes to a variable assignment (and/or new assignments) and update the lines that reference that variable, while maintaining good performance.
I recognize my question is lengthy and I have attempted to trim out all unnecessary detail. Thanks for your patience in reading.
I would be tempted to use a publish/subscribe model, using something like Peter Higgins' PubSub jquery plugin
Your overall app would subscribe/listen out for lines publishing an event that they have a variable definition. This would store any variable names in a standard javascript hashtable, along with the value. When a variable found event is published by a line, the app would check through all the known variables, and if it finds that it is a change to an existing variable value, it would publish a variable changed event. All the lines would subscribe to that event. They can then check whether they have a variable matching that name, and update the value accordingly.
Here's some untested code to give you an idea of what I mean:
var app = function()
{
var self = this;
self.variables = {};
$.subscribe('/variableAssigned', function (key, value)
{
// I think that this is the best way of checking that there is a variable
// in the object
if(self.variables.hasOwnProperty(key))
{
if(self.variables[key] !== value)
{
$.publish('/variableChanged', [ key, value ]);
}
}
});
}
In your Line object:
$.subscribe('/variableChanged', function (key, value)
{
// loop through varMap and see if any of them need updating.
});

How to retrieve a conditionally set variable from inside a function?

What can I do to retrieve a conditional variable from inside a function in the webpage being parsed by greasemonkey?
Something like this:
var myglobal = 5;
function myfunc() {
myglobal = myglobal -1;
if (myglobal == -1) {
var this1 = 'Test';
document.getElementById("mybutton").href = this1;
}
}
In this case I would like to read what is in 'this1', either directly or modifying 'myglobal', calling 'myfunc' and somehow getting the value of href from 'mybutton'... any ideas?
You usually can't get a variable value from outside a scope like that, but you may not have to in this case.
"myfunc is a counter, and I want to skip it, otherwise mybutton.href won't be set yet."
Based on the sample code, you might be able to cheat that timer just by using:
unsafeWindow.myglobal = 0;
(In fact, I use this exact technique on one very misguided training site.)
To answer the stated question further, you cannot get dynamic values from within such a scope but the initial state may be enough, as it appears to be for this question.
So you could get myfunc()s code and parse it with regex to obtain the desired value:
var theFunc = unsafeWindow.myfunc.toString ();
var desiredHref = theFunc.match (/var\s+this1\s*=\s*["']([^"']+)["']/);
if (desiredHref.length > 1) {
// Found!
desiredHref = desiredHref[1];
}

Categories

Resources