Browser Storage

This program demonstrates the browser storage of name and value pairs. The difference between local and session storage is that local storage persists accross sessions, while session storage is deleted when the browser tab is closed.

BasicStorage.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="BasicStorage.js"></script>
</body>
</html>

BasicStorage.js

if (typeof(Storage) == "undefined") {
	document.writeln("Your browser does not support storage!<br />");
} else {
	// First, clear the local storage object of anything that might be in it.
	localStorage.clear();
	localStorage.setItem("LocalName", "LOCAL TEST");
	sessionStorage.setItem("SessionName", "SESSION TEST");
	document.writeln("Your browser supports storage!<br /><hr />");
	PrintProperties();
	// Add another property to the local storage
	localStorage.setItem("SecondLocalItem", "another local value");
	PrintProperties();
	// Remove a property from each
	localStorage.removeItem("LocalName");
	sessionStorage.removeItem("SessionName");
	PrintProperties();
	document.writeln("Get Item = " + localStorage.getItem("SecondLocalItem") + "<br /><hr />");
	// NOTE: localStorage members remain when the page is refreshed because they are stored permanently.
	// They must be cleared to be removed.
	localStorage.clear();
}

function PrintProperties() {
	document.writeln("localStorage<br />");
	for (const [key, value] of Object.entries(localStorage)) {
		document.writeln(`${key}: ${value}<br />`);
	}
	document.writeln("<hr />");
	document.writeln("sessionStorage<br />");
	for (const [key, value] of Object.entries(sessionStorage)) {
		document.writeln(`${key}: ${value}<br />`);
	}
	document.writeln("<hr />");
}

Core JavaScript

Browser Storage

BasicStorage.html

BasicStorage.js

Output