ECMAScript-Save-Local-Permanent Wie geht das mit window.localStorage?

Die Sicherheit in internationalen Netzen fordern eine hohe Sicherheit bei Browsern. Um das ansonsten Status-lose (stateless) HTTP-Verfahren zu erweitern werden bei Webanwendungen häufig website-bezogene Userdaten verwendet (z.B. Session-IDs, $_COOKIE, ca. 4 kB je Seite). Moderne RIA benötigen mehr "sichere-permanente-userdaten". Hierzu gibt es bei modernen Browsern (ab HTML 5) das nativ localStorage-Objekt, das ca. 5 MB je Seite ermöglicht. localStorage ist auch bekannt als Offline Storage, Web Storage. Siehe z.B. w3.org: Webstorage ( 2016 ) | owasp.org HTML5 Security Cheat Sheet | WebStorageTest csh.rit.edu WebStorageTest | people.w3.org localstorage .

Dynamisch Erzeugung von Funktionen .. zur Laufzeit ECMAScript-Funktion ...

ECMAScript wird interpretiert. Deshalb kann (z.B. mit eval()) aus einem String eine aufrufbare Funktion erzeugt werden. Um das verfügbare JSON-Objekt nutzen zu können, wird nachfolgende new Function(...) verwendet.


Code Snippet: dynamische Erzeugung von func(x,y,z) aus obj
  1. <script type="text/javascript">//<![CDATA[
  2.  
  3. var obj = '{var r = (x+y+z)/3; return r;}';
  4. var func = new Function("x", "y", "z", obj);
  5.  
  6. var c = func(1, 2, 6); // Ausgabe c = 3
  7. var s = "c = " + c +
  8.          ", typeof c = " + typeof c +
  9.          ", typeof func = " + typeof func;
  10. alert(s);
  11.  
  12. //]]></script>

Hier ist ein Test für die dynamische Erzeugung von func(x,y,z) aus obj: teste

Beispiel für JSON und localStorage clientseitige Speicherung?

Moderne RIA benötigen sichere "permanente-userdaten". Hierzu gibt es bei modernen Browsern (ab HTML 5) das nativ localStorage-Objekt, das ca. 5 MB je Seite ermöglicht. Für Web Storage ( localStorage ) wird das "same-origin restriction"-Prinzip verwendet (nur die Seite, die speichert, darf diese eigenen Daten zugreifen). "localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage."

Das localStorage-Objekt wurde mit HTML5 eingeführt und ist bei den modernen Browsern (Firefox 3.5+, Safari 4+, Internet Explorer 8, Google Chrome 4+, Opera10+, en.wikipedia: HTML5 Comparison of layout engines ) verfügbar ( siehe z.B. en.wikipedia: Web_Storage | w3.org: html5 Overview | w3.org: Structured client-side storage | w3.org: Webstorage ( 2016 ) | whatwg: web-apps/current-work ).

Für eine browserübergreifende Anpassung (Cross-Browser Kompatibiltät) muß (2010) lediglich für den IE-Browser das localStorage-Objekt nachgebildet werden (siehe msdn VS.85%29.aspx ). 

 var len = localStorage.length; // Enthält die Anzahl der gespeicherten Elemente
 localStorage.key(n);           // Gibt den Namen des n-ten Keys zurück.
 localStorage.getItem(key);     // Liefert den Wert zum Schlüssel key
 localStorage.setItem(key,data);// Legt den Wert value unter dem Schlüssel key ab
 localStorage.removeItem(key);  // Löscht den Wert zum Schlüssel key
 localStorage.clear();          // Löscht alle gespeicherten Daten

localStorage wird auch "DOM Storage" genannt und kann in Verbindung mit JSON (JavaScript Object Notation) verwendet werden. JSON ist ein schlankes Datenaustauschformat, das für Menschen einfach zu lesen und zu schreiben und für Maschinen einfach zu parsen und zu generieren ist (siehe   JSON (de) )

localStorage und JSON 

function supports_html5_storage() {
  return ('localStorage' in window) && window['localStorage'] !== null;
}
localStorage.setItem(key, JSON.stringify(value));
var value = JSON.parse(localStorage.getItem(key));
Code Snippet:
    JSON (.stringify, .parse);
    localStorage (.clear, .removeItem, .getItem, .setItem)
  1. function save_permanent_build_func() {
  2.   //localStorage.removeItem('myDelObject');
  3.   localStorage.clear();
  4.  
  5.   // save  den String JSON.stringify(o) permanent unter Namen 'obj'
  6.   var o = { "one":1,"two":2,"func":"{x += y+z; return x/3;}" };
  7.   localStorage.setItem('obj', JSON.stringify(o));
  8.  
  9.   // load String
  10.   var s = localStorage.getItem('obj');
  11.  
  12.   // erstelle Objekt O aus String s
  13.   var O = JSON.parse(s);
  14.  
  15.   // erstelle aus O eine dynamische Funktion
  16.   var func = new Function("x", "y", "z", O.func);
  17.  
  18.   alert('func(6, O.one, O.two) = ' + func(6, O.one, O.two));
  19. }

Hier ist ein Test für die dynamische Erzeugung von func(x,y,z) aus einem clientseitig-permanent gespeicherten obj-String: teste

Beispiel: localStorage fallback

Die Funktionen set_local_item(key, val); get_local_item(key); del_local_item(key); del_clear(); get_local_size() verwenden das Objekt window.localStorage. Ist kein window.localStorage vorhanden, so wird als fallback var loc_obj = {}; verwendet 

var loc_obj = {},  // global, für fallback
local_length = 0;
function has_local_storage() { var r = 0;
    try { if ("localStorage" in window && typeof (window.localStorage) === 'object') { r = 1; } } catch (e) { r = 0; }
return r;
}
function set_local_item(key, val) { if (has_local_storage()) { localStorage.setItem(key, JSON.stringify(val));
} else { loc_obj[key] = JSON.stringify(val); }
}
function get_local_item(key) {
    var o = null;
if (has_local_storage()) {
    try { o = JSON.parse(localStorage.getItem(key)); } catch (ee) {
        show("ERR: get_local_item" + ee);
        set_local_item(key, {}); o = get_local_item(key);
    }
} else { o = JSON.parse(loc_obj[key]); if (!o) { loc_obj[key] = {}; o = {}; }
} return o;
}
function del_local_item(key) { if (has_local_storage()) { localStorage.removeItem(key); } else { loc_obj["key"] = null; } }
function del_clear()   { if (has_local_storage()) { localStorage.clear(); } else { loc_obj = { }; } }
function get_local_length() { var r = 0; if (has_local_storage()) { r = localStorage.length; } return r; }
function get_local_size() {
    var o, k, keys, len = 0; // genähert als anz stringify-Zeichen
if (has_local_storage()) { o = localStorage; } else { o = loc_obj; }
keys = Object.keys(o);
for (k = 0; k < keys.length; k += 1) { len += o[keys[k]].length; }
return len;
}

 Teste:
set_local_item("item0", { s0: "hallo",  n0: 4711        });
set_local_item("item1", { o1: { s1: "hallo", n1: 4711 } });
has_local_storage() 
get_local_item("item0").s0+" "+get_local_item("item0").n0 
 get_local_item("item1").o1.s1+" "+get_local_item("item1").o1.n1  
get_local_size() grob etwa