use local storage if possible to persist updates

webxdc.js

@@ -1,5 +1,53 @@
 // debug friend: document.writeln(JSON.stringify(value));
-// maybe helpful: window.sessionStorage, https://www.w3schools.com/html/html5_webstorage.asp
+window.xdcStorage = (() => {
+    var updatesKey = "__xdcUpdatesKey__";
+    var fakeStorage = {
+	_data: {},
+
+	setItem: function (id, val) {
+	    return this._data[id] = String(val);
+	},
+
+	getItem: function (id) {
+	    return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
+	},
+
+	removeItem: function (id) {
+	    return delete this._data[id];
+	},
+
+	clear: function () {
+	    return this._data = {};
+	}
+    };
+    var localStorageSupported = () => {
+	var testKey = "__xdcTestKey__";
+	try {
+	    var storage = window.localStorage;
+	    storage.setItem(testKey, "1");
+	    storage.removeItem(testKey);
+	    return true;
+	} catch (error) {
+	    return false;
+	}
+    };
+    var storage = localStorageSupported() ? window.localStorage : fakeStorage;
+
+    return {
+	getUpdates: () => {
+            var updatesJSON = storage.getItem(updatesKey);
+            return updatesJSON ? JSON.parse(updatesJSON) : [];
+	},
+	saveUpdate: (update) => {
+            var updates = window.xdcStorage.getUpdates();
+            updates.push(update);
+            storage.setItem(updatesKey, JSON.stringify(updates));
+	},
+	clear: () => {
+	    storage.clear();
+	}
+    };
+})();
 
 window.webxdc = (() => {
     var updateListener = () => {};
@@ -7,13 +55,11 @@ window.webxdc = (() => {
     return {
         selfAddr: () => window.xdcSelfAddr || "device0@local.host",
         setUpdateListener: (cb) => (window.xdcUpdateListener = cb),
-        getAllUpdates: () => {
-            return getXdcRoot().xdcUpdates;
-        },
+        getAllUpdates: () => {return getXdcRoot().xdcStorage.getUpdates();},
         sendUpdate: (description, payload) => {
             // alert(description+"\n\n"+JSON.stringify(payload));
-	    var update = {payload: payload};
-	    getXdcRoot().xdcUpdates.push(update);
+            var update = {payload: payload};
+            getXdcRoot().xdcStorage.saveUpdate(update);
             var all = getAllXdcWindows();
             all.forEach((w) => {
                 //alert(w.xdcUpdateListener);
@@ -24,10 +70,9 @@ window.webxdc = (() => {
 })();
 
 window.allXdcWindows = [window];
-window.xdcUpdates = [];
 window.xdcUpdateListener = 12;
 
-var styleControlPanel = 'position: fixed; bottom:1em; left:1em; background-color: #000; opacity:0.8; padding:.5em; font-family: sans-serif; width: 50%;';
+var styleControlPanel = 'position: fixed; bottom:1em; left:1em; background-color: #000; opacity:0.8; padding:.5em; font-family: sans-serif; width: 50%;color:#fff;';
 var styleMenuLink     = 'color:#fff; text-decoration: none;';
 
 function getXdcRoot() {
@@ -43,7 +88,7 @@ function getAllXdcWindows() {
     return xdcRoot.allXdcWindows;
 }
 
-function addPeer() {
+function addXdcPeer() {
     var xdcChild = window.open(window.location);
     var xdcRoot = getXdcRoot();
     xdcChild.xdcRoot = xdcRoot;
@@ -51,6 +96,11 @@ function addPeer() {
     xdcRoot.allXdcWindows.push(xdcChild);
 }
 
+function clearXdcStorage() {
+    getXdcRoot().xdcStorage.clear();
+    alert("Done.");
+}
+
 function alterApp() {
     var title = document.getElementsByTagName('title')[0];
     if (typeof title == 'undefined') {
@@ -63,7 +113,8 @@ function alterApp() {
 	var div = document.createElement('div');
 	div.innerHTML =
             '<div style="' + styleControlPanel + '">' +
-            '<a href="javascript:addPeer();" style="' + styleMenuLink + '">Add Peer</a>' +
+            '<a href="javascript:addXdcPeer();" style="' + styleMenuLink + '">Add Peer</a> | ' +
+            '<a href="javascript:clearXdcStorage();" style="' + styleMenuLink + '">Clear Storage</a>' +
             '<div>';
 	document.getElementsByTagName('body')[0].append(div.firstChild);
     }