101 lines
3.6 KiB
HTML
101 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Local Site — Storage</title>
|
|
<link rel="stylesheet" href="assets/site.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Storage Page</h1>
|
|
<nav><a href="index.html">Home</a></nav>
|
|
</header>
|
|
<main>
|
|
<h2>localStorage</h2>
|
|
<button id="ls-set">Set ls.foo = "bar"</button>
|
|
<button id="ls-get">Get ls.foo</button>
|
|
<p>Result: <span id="ls-out">not attempted</span></p>
|
|
|
|
<h2>sessionStorage</h2>
|
|
<button id="ss-set">Set ss.foo = "baz"</button>
|
|
<button id="ss-get">Get ss.foo</button>
|
|
<p>Result: <span id="ss-out">not attempted</span></p>
|
|
|
|
<h2>IndexedDB</h2>
|
|
<button id="idb-set">Set idb key</button>
|
|
<button id="idb-get">Get idb key</button>
|
|
<p>Result: <span id="idb-out">not attempted</span></p>
|
|
|
|
<h2>Cookies (document.cookie)</h2>
|
|
<button id="ck-set">Set cookie foo=bar</button>
|
|
<button id="ck-get">Get cookie</button>
|
|
<p>Result: <span id="ck-out">not attempted</span></p>
|
|
</main>
|
|
<script>
|
|
function $(id) { return document.getElementById(id); }
|
|
|
|
$('ls-set').onclick = function () {
|
|
try { localStorage.setItem('foo', 'bar'); $('ls-out').textContent = 'set OK'; }
|
|
catch (e) { $('ls-out').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
$('ls-get').onclick = function () {
|
|
try { $('ls-out').textContent = 'value=' + localStorage.getItem('foo'); }
|
|
catch (e) { $('ls-out').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
|
|
$('ss-set').onclick = function () {
|
|
try { sessionStorage.setItem('foo', 'baz'); $('ss-out').textContent = 'set OK'; }
|
|
catch (e) { $('ss-out').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
$('ss-get').onclick = function () {
|
|
try { $('ss-out').textContent = 'value=' + sessionStorage.getItem('foo'); }
|
|
catch (e) { $('ss-out').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
|
|
$('idb-set').onclick = function () {
|
|
try {
|
|
var req = indexedDB.open('testdb', 1);
|
|
req.onupgradeneeded = function (e) {
|
|
var db = e.target.result;
|
|
if (!db.objectStoreNames.contains('kv')) db.createObjectStore('kv');
|
|
};
|
|
req.onsuccess = function (e) {
|
|
var db = e.target.result;
|
|
var tx = db.transaction('kv', 'readwrite');
|
|
tx.objectStore('kv').put('hello', 'greeting');
|
|
tx.oncomplete = function () { $('idb-out').textContent = 'set OK'; };
|
|
tx.onerror = function (ev) { $('idb-out').textContent = 'tx ERROR: ' + ev.target.error; };
|
|
};
|
|
req.onerror = function (ev) { $('idb-out').textContent = 'open ERROR: ' + ev.target.error; };
|
|
} catch (e) { $('idb-out').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
$('idb-get').onclick = function () {
|
|
try {
|
|
var req = indexedDB.open('testdb', 1);
|
|
req.onsuccess = function (e) {
|
|
var db = e.target.result;
|
|
if (!db.objectStoreNames.contains('kv')) {
|
|
$('idb-out').textContent = 'no store yet';
|
|
return;
|
|
}
|
|
var tx = db.transaction('kv', 'readonly');
|
|
var r = tx.objectStore('kv').get('greeting');
|
|
r.onsuccess = function () { $('idb-out').textContent = 'value=' + r.result; };
|
|
r.onerror = function (ev) { $('idb-out').textContent = 'get ERROR: ' + ev.target.error; };
|
|
};
|
|
req.onerror = function (ev) { $('idb-out').textContent = 'open ERROR: ' + ev.target.error; };
|
|
} catch (e) { $('idb-out').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
|
|
$('ck-set').onclick = function () {
|
|
try { document.cookie = 'foo=bar; path=/'; $('ck-out').textContent = 'set OK'; }
|
|
catch (e) { $('ck-out').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
$('ck-get').onclick = function () {
|
|
try { $('ck-out').textContent = 'cookies=' + (document.cookie || '(none)'); }
|
|
catch (e) { $('ck-out').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|