Develop Reference

localStorage returning null even though it can be logged in console through browser

I saved an item to localStorage. But it keeps returning null. I can log it out in the console on my browswer by writing localStorage, and the string exists as the key value product: basic bundle when I do that. However, when I try to console.log it from within my program, It returns null. The item (this.product[0].name) in local storage is a string that says "basic bundle"
I set it using
window.localStorage.setItem("product", this.product[0].name);
then get it using
const product = window.localStorage.getItem(product)
and tried to log it out by writing
console.log(product);
I have a different variable that I set and get the same way from localStorage and on the same pages that I can access and utilize in my code. But for some reason, this one won't work. any suggestions?

Cannot access local variable in console when debugging reactjs in browser

When debugging js in browser, usually you put a breakpoint, and when the code hits there, you can access all local variables no matter your mouse hovers on it or you just type the variable name from the console (because you are in the execution scope)
But it seems to behave differently in react since I am able to see all local variables. However I cannot access them from the console or change its value from the console. Refer to the screenshot below.
So I can access url but cannot access response or timeTakenByFetchApi

My understanding is that console.log will be executed straight away, even though the promise has not returned anything.

How getting data from console browser to be variable on PHP code?

I have problem when I need to get data from browser console. The data is from map tracking online. And the data in browser console is always update every 10 seconds. What I need to ask is, how we get data in browser console and show it in our php code project. Here is the example : .data in browser console of Mozilla Firefox

The only way you can achieve this is by modifying the console.log function in JavaScript so that you can have a store of the logs in the console (take a look at this question) and then use AJAX to pass it to your PHP script.

Prevent browser from remembering JS variable after page refresh

I've looked at several questions asking how to remember the variable, but I'm having the opposite problem which is surprising to me.
My main.js file will have this:
console.log(name);
and I get nothing. If I try to log it in the console it returns undefined, that is expected,
now I create the variable like this:
var name = "Sandy"; //global variable
console.log(name); //returns "Sandy" which is also expected.
But now the unexpected happens. I remove the variable so we're back to this, and then I refresh the page:
console.log(name); //This returns "Sandy" still...
How is this happening and why? I thought it was cookies, so I tried it in incognito mode (Maybe I misunderstand incognito?) But it works exactly the same.
In order to make the variable go away I have to close down the browser and open up a new window.
After reading briefly about LocalStorage, cookies, and incognito, it sounds like cookies are the problem, but wouldn't I have to create the cookie manually?
It seems like the browsers should be forgetting the variables unless I explicitly set the variable to a cookie.

By declaring a global variable called name you are overwriting a window.name property, which doesn't reset on page refresh.
window is a built-in object, specific to each opened tab in a web browser and represents a containing document. You can read more about the window object here and more about its name property here.
You can also check what happens during execution of your code by logging window.name before and after you define your variable.
It's best to avoid using name as a variable in JavaScript code that runs in a browser. Set your variable to something else (that is not a reserved word or a propery name of a built-in object) and your code will work.

Firefox addon - cannot trigger click event of any kind

I am working on a firefox addon that will automatically populate the login form fields and login. What I have access to could be anything from id's classes' or the xpath to the login button depending on what the website gives. The priority captured will usually be id's if they exist. The specific website that won't trigger the click is: https://login.paylocity.com/escher/escher_webui/views/login/login.aspx
I tried using $(element).trigger('click') or $(element).click() and they both don't trigger the click automatically. The error in the console log shows:
XrayWrapper denied access to property callee (reason: value is callable). See https://developer.mozilla.org/en-US/docs/Xray_vision for more information. Note that only the first denied property access from a given global object will be reported.
I also tried the Javascript method shown here: Is it possible to trigger a link's (or any element's) click event through JavaScript?
That doesn't work either.

XrayWrapper denied access to property callee
This suggests that the script is running in an environment that has higher privileges than the page content itself, which in turn results in some security barriers (the xray wrappers in one direction, access denied errors in the other) since the caller now is partially privileged code which content is not allowed to access.
Instead of using jquery you could try manually synthesizing a DOM event and firing it, possibly by accessing the unsafe window.
Something along the lines of new window.wrappedJSObject.MouseEvent("click"), same for dispatchEvent().
Alternatively you could also try firing a submit event on the form instead of a click event.
Yet another approach is to make .callee accessible by transplanting the calling function into the content window.