In ye olde days, cookies were used to store data (temporarily) on a web user's computer; nowadays, the Web Storage API (small key-pair data strings) and the IndexedDB (more complicated data) are the ways to accomplish this. This example is a very simple example of using the Web Storage API. Here's what the entire two pages look like (see bottom of page for absolute simplest example):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The web site of kentwest</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
form {border:solid 1px blue; box-shadow: 14px 14px 14px gray; padding-left: 5px; width: 200px;}
</style>
</head>
<body>
<h1>Using the Web Storage API</h1>
<p>In ye olde days, cookies were used to store data (temporarily) on a web user's computer; nowadays, the Web Storage API (small key-pair data strings) and the IndexedDB (more complicated data) are the ways to accomplish this. This example is a very simple example of using the Web Storage API. Here's what the entire two pages look like:</p>
<form>
<ul style="list-style-type: none; padding-left: 15px;">
<li> <!-- GET HOSTNAME -->
<label for="hostname">Hostname:</label>
<input type="text" id="hostname" name="hostname" value="ACUxxxxx">
</li>
<li>
<label for="domain">Domain:</label>
<input type="text" id="domain" name="domain" value="ACU.LOCAL">
</li>
<li style="margin:15px; text-align: right;">
<button type="button" onclick="ApplyForm()">Apply</button>
</li>
</ul>
</form>
<p>This page will store the values entered above. Click on the <a href="read.html">Read and Display</a> link to see that we can read these data items.</p>
<script>
window.onload = function() {
var hostfield = document.getElementById("hostname");
hostfield.setSelectionRange(3,50);
hostfield.focus();
}
function ApplyForm() {
var hostname = document.getElementById("hostname").value;
var domain = document.getElementById("domain").value;
localStorage.setItem('hostname', hostname);
localStorage.setItem('domain', domain);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The web site of kentwest</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
span {border:solid 1px black; padding-left:2px; padding-right:2px; background-color:gray; color:yellow; font:bold italic;}
</style>
</head>
<body>
<h1>Reading the data item</h1>
<div>
<p>HOSTNAME: <span id="host"></span></p>
<p>DOMAIN: <span id="dom"></span></p>
</div>
<a href="index.html">Back to the first page</a>
<script>
const hostname = localStorage.getItem('hostname');
const domain = localStorage.getItem('domain');
document.getElementById('host').innerText = hostname;
document.getElementById('dom').innerText = domain;
</script>
</body>
</html>
This page will store the values entered above. Click on the Read and Display link to see that we can read these data items.
For the absolute simplest example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Blah blah blah this is the main text body of the html page.</p>
<script>
// This stores the text string "simple example" as a key-pair associated with "name".
localStorage.setItem('name', "simple example");
// And this reads it back into a constant, where you can do stuff with it.
const my_stored_name = localStorage.getItem('name')
</script>
</body>
</html>
After creating the absolute simplest example, you can see that the key-pair is actually being saved by looking in your browser tools. For example, with Firefox, press F12 to open the tools window, then click on the "Storage" tab, then "Local Storage", then the web-page's name, then you'll see the key-pair in the right-hand pane.