The session storage events will be triggered for embedded documents, such as those in an iframe.
The following code shows an iframe added to the previous example which contains the storage.html document.
<!DOCTYPE HTML>
<html>
<body>
<div>
<div><label>Key:</label><input id="key" placeholder="Enter Key"/></div>
<div><label>Value:</label><input id="value" placeholder="Enter Value"/></div>
<div id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</div>
<p id="countmsg">There are <span id="count"></span> items</p>
</div>
<table id="data" border="1">
<tr><th>Item Count:</th><td id="count">-</td></tr>
</table>
<iframe src="storage.html" width="500" height="175"></iframe>
<script>
displayData();
let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
switch (e.target.id) {
case 'add':
let key = document.getElementById("key").value;
let value = document.getElementById("value").value;
sessionStorage.setItem(key, value);
break;
case 'clear':
sessionStorage.clear();
break;
}
displayData();
}
function displayData() {
let tableElem = document.getElementById("data");
tableElem.innerHTML = "";
let itemCount = sessionStorage.length;
document.getElementById("count").innerHTML = itemCount;
for (let i = 0; i < itemCount; i++) {
let key = sessionStorage.key(i);
let val = sessionStorage[key];
tableElem.innerHTML += "<tr><th>" + key + ":</th><td>"
+ val + "</td></tr>";
}
}
</script>
</body>
</html>
storage.html
<!DOCTYPE HTML>
<html>
<body>
<table id="data" border="1">
<tr>
<th>key</th>
<th>oldValue</th>
<th>newValue</th>
<th>url</th>
<th>storageArea</th>
</tr>
</table>
<script>
let tableElem = document.getElementById("data");
window.onstorage = handleStorage;
function handleStorage(e) {
let row = "<tr>";
row += "<td>" + e.key + "</td>";
row += "<td>" + e.oldValue + "</td>";
row += "<td>" + e.newValue + "</td>";
row += "<td>" + e.url + "</td>";
row += "<td>" + (e.storageArea == localStorage) + "</td></tr>";
tableElem.innerHTML += row;
};
</script>
</body>
</html>