Im trying to follow this article that teaches us how to share localstorage data between domains if you have an iframe embedded.
So to try it out, I created two separate projects with its own html files and index files respectively. I then launched both html files in the server using VS Code's live server. I was trying to get http://127.0.0.1:5500/getlocalstorage.html to pass in the user login data to http://127.0.0.1:5501/getlocalstorage.html, however, it returns no data in the localstorage tab and just shows as:
Is there anything I am doing wrong here? I am trying to pass in the dummy login info from localhost:5500 to localhost:5501. Please see my code below:
Localhost 5500's index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function postCrossDomainMessage(msg) {
var win = document.getElementById("ifr").contentWindow;
win.postMessage(msg, "http://127.0.0.1:5500/");
}
var postMsg = { login: "user" }; // this is just example
postCrossDomainMessage(postMsg);
</script>
<script src="index.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<iframe
style="display: none"
src="http://127.0.0.1:5501/getlocalstorage.html"
id="ifr"
></iframe>
<h1>http://127.0.0.1:5500/index.html</h1>
</body>
</html>
Localhost 5501's html file(getlocalstorage.html):
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var PERMITTED_DOMAIN = "http://127.0.0.1:5500";
/**
* Receiving message from other domain
*/
window.addEventListener("message", function (event) {
if (event.origin === PERMITTED_DOMAIN) {
//var msg = JSON.parse(event.data);
// var msgKey = Object.keys(msg)[0];
if (event.data) {
localStorage.setItem("localstorage", event.data);
} else {
localStorage.removeItem("localstorage");
}
}
});
</script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>http://127.0.0.1:5501/getlocalstorage.html</h1>
</body>
</html>
New Error that is being shown in console
localhost 5500 console error
Do you see anything that I might have done wrong here? Thanks!
This is in localhost 5500 tab:
And in localhost 5501 localstorage tab:
Im trying to follow this article that teaches us how to share localstorage data between domains if you have an iframe embedded.
https://www.internetkatta./share-cookies-or-local-storage-data-between-cross-domain
So to try it out, I created two separate projects with its own html files and index files respectively. I then launched both html files in the server using VS Code's live server. I was trying to get http://127.0.0.1:5500/getlocalstorage.html to pass in the user login data to http://127.0.0.1:5501/getlocalstorage.html, however, it returns no data in the localstorage tab and just shows as:
Is there anything I am doing wrong here? I am trying to pass in the dummy login info from localhost:5500 to localhost:5501. Please see my code below:
Localhost 5500's index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function postCrossDomainMessage(msg) {
var win = document.getElementById("ifr").contentWindow;
win.postMessage(msg, "http://127.0.0.1:5500/");
}
var postMsg = { login: "user" }; // this is just example
postCrossDomainMessage(postMsg);
</script>
<script src="index.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<iframe
style="display: none"
src="http://127.0.0.1:5501/getlocalstorage.html"
id="ifr"
></iframe>
<h1>http://127.0.0.1:5500/index.html</h1>
</body>
</html>
Localhost 5501's html file(getlocalstorage.html):
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var PERMITTED_DOMAIN = "http://127.0.0.1:5500";
/**
* Receiving message from other domain
*/
window.addEventListener("message", function (event) {
if (event.origin === PERMITTED_DOMAIN) {
//var msg = JSON.parse(event.data);
// var msgKey = Object.keys(msg)[0];
if (event.data) {
localStorage.setItem("localstorage", event.data);
} else {
localStorage.removeItem("localstorage");
}
}
});
</script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>http://127.0.0.1:5501/getlocalstorage.html</h1>
</body>
</html>
New Error that is being shown in console
localhost 5500 console error
Do you see anything that I might have done wrong here? Thanks!
This is in localhost 5500 tab:
And in localhost 5501 localstorage tab:
Share Improve this question edited Feb 16, 2022 at 1:25 sideshowbarker♦ 88.6k30 gold badges215 silver badges212 bronze badges asked Feb 15, 2022 at 23:05 KimboKimbo 2311 gold badge3 silver badges12 bronze badges1 Answer
Reset to default 1The script tag is before the iframe tag. It is also executed before the iframe is created. Hence, searching for ifr returns null and null does not have a contentWindow, which throws an error. You will need to postpone the JS execution after the page load, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function postCrossDomainMessage(msg) {
var win = document.getElementById("ifr").contentWindow;
win.postMessage(msg, "http://127.0.0.1:5500/");
}
function load() {
var postMsg = { login: "user" }; // this is just example
postCrossDomainMessage(postMsg);
}
</script>
<script src="index.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body onload="load()">
<iframe
style="display: none"
src="http://127.0.0.1:5501/getlocalstorage.html"
id="ifr"
></iframe>
<h1>http://127.0.0.1:5500/index.html</h1>
</body>
</html>
Note that the load function is not executed in the script tag, only defined. It is the onload event defined in body that triggers it.
EDIT
The line of localStorage.setItem("localstorage", event.data); stores an item into localStorage with the key of 'localStorage' and the value of [Object object], because into localStorage you will store strings. So, you will need to stringify the object that you have. So, you will need to do something like
localStorage.setItem("localstorage", JSON.stringify(event.data));
And you can read from it via
JSON.parse(localStorage.getItem("localStorage"))
Example
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745485582a4629752.html
评论列表（0条）