更改“ Window.location.href”时，将删除“窗口”对象上存储的属性

Question

I'm defining a property ( say, myVar ) on window object (to use it as a global variable ), but the problem is when I take the user on some different page by making use of window.location.href that global variable is lost, and becomes undefined .

Why is this unexpected behaviour of window obj variable is showing up, is it related to scope, and how to correct it ?

Answer 1

The window object is built on page load. After the page loads, you add the property and that stays with the object.

When you redirect the user to another page, this is (obviously) interpreted as a new page, which means a new page load. By then, the window object is completely new.

If you have to keep this variable between page refreshes, that a look at:

sessionStorage

Syntax

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

localStorage

Syntax

// The following snippet accesses the current domain's local Storage object and adds a data item to it using Storage.setItem().
localStorage.setItem('myCat', 'Tom');

// The syntax for reading the localStorage item is as follows:
var cat = localStorage.getItem('myCat');

// The syntax for removing the localStorage item is as follows:
localStorage.removeItem('myCat');

//The syntax for removing all the localStorage items is as follows:
// Clear all items
localStorage.clear();

Answer 2

You could use the localStorage to store data that will persist between the pages of your website.

localStorage.setItem('myVar', value);

localStorage.getItem('myVar'); // gives value

https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage