diff options
Diffstat (limited to 'files/nl/web/api/web_storage_api/index.html')
| -rw-r--r-- | files/nl/web/api/web_storage_api/index.html | 299 |
1 files changed, 0 insertions, 299 deletions
diff --git a/files/nl/web/api/web_storage_api/index.html b/files/nl/web/api/web_storage_api/index.html deleted file mode 100644 index ab4bf0d6b7..0000000000 --- a/files/nl/web/api/web_storage_api/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: DOM Storage -slug: Web/API/Web_Storage_API -translation_of: Web/API/Web_Storage_API -translation_of_original: Web/Guide/API/DOM/Storage -original_slug: DOM/Storage ---- -<h2 id="Samenvatting">Samenvatting</h2> -<p>DOM Storage is de naam van een set <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage" style="line-height: inherit;">opslag-gerelateerde features</a> <span style="line-height: inherit;">voor het eerst geïntroduceerd in de </span><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a><span style="line-height: inherit;">-specificatie en nu afgesplitst in zijn eigen </span><a class="external" href="http://dev.w3.org/html5/webstorage/" style="line-height: inherit;" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>-specificatie. DOM Storage is ontworpen met als doel een grotere, beter beveiligde en makkelijker te gebruiken alternatief voor opslaan van informatie dan cookies te zijn. Het is geintroduceerd met <a href="/en-US/docs/Firefox_2_for_developers" style="line-height: inherit;" title="Firefox_2_for_developers">Firefox 2</a> en <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" style="line-height: inherit;" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> -<div class="note"> - <strong>Note:</strong> DOM Storage is niet hetzelfde als <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces voor SQLite) of <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (een <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> opslag utility te gebruiken door extensies).</div> -<h2 id="Omschrijving">Omschrijving</h2> -<p>Het DOM Storage-mechanisme is een manier om key/value-paren op een veilige manier op te slaan en later ophalen voor gebruik. Het doel van deze toevoeging is om een uitgebreide manier te leveren waardoor het mogelijk wordt om interactieve applicaties te maken (inclusief geavanceerde capaciteiten, zoals het 'offline' kunnen werken voor langere tijd).</p> -<p>Op Mozilla-gebaseerde browsers, Internet <span style="line-height: inherit;">Explorer 8+, Safari 4+, Chrome en Opera leveren allemaal een werkende implementatie van de DOM Storage-specificatie. (In het geval dat je ook oudere versies van IE ondersteunt, kan het handig zijn om te weten dat er een legacy feature genaamd "</span><a class="external" href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx" style="line-height: inherit;">userData behavior</a><span style="line-height: inherit;">" in pre-8 versies van IE zit)</span></p> -<p>DOM Storage is handig omdat er geen goede browser-only methode bestaat voor het aanhoudend opslaan van redelijke hoeveelheden data voor een willekeurige tijdsperiode. <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie" style="line-height: inherit;">Browsercookies</a> hebben gelimiteerde capaciteit en geven geen mogelijkheid voor het organiseren van aanhoudende data. Andere methodes (zoals <a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html" style="line-height: inherit;">Flash Local Storage</a>) vereisen een externe plugin.</p> -<p>Een van de eerste publieke applicaties die gebruik maakt van de nieuwe DOM Storage-functionalitiet (naast Internet Explorer's userData Behavior) was <a class="external" href="http://aaronboodman.com/halfnote/" style="line-height: inherit;">halfnote</a> (een notitieapplicatie) geschreven door <a class="external" href="http://aaronboodman.com/" style="line-height: inherit;">Aaron Boodman</a>. In zijn applicatie, sloeg Aaron notities zowel op door middel van een server (als een internetverbinding beschikbaar was) en een lokale dataopslag. Dit maakte het voor de gebruiker mogelijk om veilig opgeslagen notities te maken met een sporadische internetverbinding.</p> -<p>Ondanks dat het concept, en implementatie, in halfnote redelijk simpel was, laat de creatie zien wat de mogelijkheden zijn voor een nieuw soort webapplicaties die zowel online als offline bruikbaar zijn.</p> -<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.628em; line-height: inherit;">Referentie</span></p> -<p>Het hierop volgende zijn globale objecten die bestaan als een property van elk <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code> object</a>. Dit betekent dat ze aangesproken kunnen worden als <code>sessionStorage</code> of <code>window.sessionStorage</code>. (Dit is belangrijk omdat je hierdoor ze kan gebruiken in IFrames om extra data op te slaan, aan te spreken, buiten wat er direct beschikbaar is in je eigen pagina.)</p> -<h3 id="Storage"><code>Storage</code></h3> -<p>Dit is een constructor (<code>Storage</code>) voor alle Storage instanties (<code>sessionStorage</code> en <code>globalStorage[location.hostname]).</code> Het zetten van <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> zou zowel <code>localStorage.removeKey en sessionStorage.removeKey </code><span style="line-height: inherit;">als zodanig veranderen.</span></p> -<p><code>globalStorage</code> items zijn geen instanties van <code>Storage</code>, maar zijn instanties van <code>StorageObsolete</code>.</p> -<p><code>Storage</code> is gedefineerd door de WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> als het volgende:</p> -<pre class="eval">interface <dfn>Storage</dfn> { - readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; - [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); - [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); - [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); - [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); - void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); -}; -</pre> -<div class="note"> - <strong>Note: </strong>Ookal kan je de waardes lezen en schrijven door de standaard JavaScript property access methode, het gebruik van de getItem en setItem methodes wordt aangeraden.</div> -<div class="note"> - <strong>Note:</strong> Onthoud dat alles dat je opslaat via een store beschreven op deze pagina wordt omgezet naar een string via zijn <code>.toString</code> methode voordat het wordt opgeslagen. Een gewoon object opslaan resulteert dus in een string <code>"[object Object]"</code> dat wordt opgeslagen, in plaats van het object of zijn JSON-representatie. Het gebruik van native JSON parsing en serializatie methodes geleverd door de browser is een goede en veelvuldig gebruikte manier om objecten in string formaat op te slaan.</div> -<h3 id="sessionStorage"><code>sessionStorage</code></h3> -<p>Dit is een globaal object (<code>sessionStorage</code>) dat een opslagruimte biedt gedurende de duur van paginasessie. Een paginasessie duurt zolang de browser open is en overleeft het herladen van de pagina en paginarestoraties. Het openen van een pagina in een nieuwe tab of window zorgt ervoor dat een nieuwe sessie wordt gestart.</p> -<pre class="brush:js">// Sla data op in de huidige sessie store -sessionStorage.setItem("username", "John"); - -// Spreek de opgeslagen data aan -alert( "username = " + sessionStorage.getItem("username")); -</pre> -<p>Het <code>sessionStorage</code> object is het handigst voor het bijhouden van tijdelijke data die behouden moet blijven als de pagina per ongeluk wordt herladen.</p> -<p>{{ fx_minversion_note("3.5", "Voor Firefox 3.5, werd sessionStorage data niet automatisch hersteld van een browsercrash. Startend vanaf Firefox 3.5, werkt dit zoals per de specificatie.") }}</p> -<p><strong>Voorbeelden:</strong></p> -<p>Automatisch opslaan van de inhoud van een tekstveld en als de browser per ongeluk herladen wordt, het herstellen van de inhoud van het tekstveld, zodat geen tekst verloren gaat.</p> -<pre class="brush:js"> // Haal het tekstveld op dat we gaan volgen - var field = document.getElementById("field"); - - // Kijk of er een autosave waarde is - // (Dit gebeurt alleen als de pagina per ongeluk wordt herladen) - if ( sessionStorage.getItem("autosave")) { - // Herstel de inhoud van het tekstveld - field.value = sessionStorage.getItem("autosave"); - } - - // Bekijk de inhoud van het tekstveld iedere seconde - setInterval(function(){ - // En sla het resultaat op in het sessie storage object - sessionStorage.setItem("autosave", field.value); - }, 1000); -</pre> -<p><strong>Meer informatie:</strong></p> -<ul> - <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specificatie</a></li> -</ul> -<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3> -<p><code>localStorage</code> is hetzelfde als <code>{{ Anch("sessionStorage") }} </code>met dezelfde same-origin regels toegepast, maar is vasthoudend. <code>localStorage</code> werd geintroduceerd in Firefox 3.5.</p> -<div class="note"> - <strong>Note:</strong> Als de browser in prive browsing modus gaat, wordt er een nieuwe, tijdelijke database aangemaakt om lokale dat in op te slaan. Deze database wordt geleegd en weggegooid als prive browsing modus wordt uitgezet.</div> -<h4 id="Compatibility">Compatibility</h4> -<p><code>Storage</code> objecten zijn een recente toevoeging aan de standaard. Hierdoor is het mogelijk dat ze niet aanwezig zijn in alle browsers. Je kan hier omheen werken door het toevoegen van en van de volgende twee stukken code aan het begin van je scripts. Dit maakt het gebruik van het <code>localStorage</code> object mogelijk in implementaties die het niet native ondersteunen.</p> -<p>Dit algoritme is een exacte imitatie van het <code>localStorage</code> object, maar maakt gebruik van cookies.</p> -<pre class="brush:js">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> -<div class="note"> - <strong>Note:</strong> De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Met dit algoritme gebruik de functies <code>localStorage.setItem()</code> en <code>localStorage.removeItem()</code> om een key toe te voegen, te veranderen of te verwijderen. Het gebruik van de methodes <code>localStorage.yourKey = yourValue;</code> en <code>delete localStorage.yourKey;</code> om een key te zetten en te verwijderen <strong>is niet een veilige manier met deze code</strong>. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> naar: <code style="background: #ccc;">"; path=/"</code> (en het aanpassen van de naam) wordt dit een <code>sessionStorage</code> polyfill in plaat van een <code>localStorage</code> polyfill.</div> -<p>Hier is nog een, minder precieze, imitatie van het <code>localStorage</code> object. Het is simpeler dan de vorige, maar is compatible met oudere browsers, zoals pre-8 versie van IE (<strong>werkend getest tot Internet Explorer 6</strong>). Het maakt ook gebruik van cookies.</p> -<pre class="brush:js">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { - return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); - }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> -<div class="note"> - <strong>Note: </strong> De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Maak bij dit algoritme gebruik van de functies <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> om een key te krijgen, veranderen of verwijderen. Het gebruik van de methode <code>localStorage.yourKey</code> om een key te krijgen veranderen of verwijderen <strong>is niet toegestaan bij deze code</strong>. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> into: <code style="background: #ccc;">"; path=/" </code> (en het aanpassen van de naam) wordt dit een <code style="font-size: 14px;">sessionStorage</code> polyfill in plaat van een <code style="font-size: 14px;">localStorage</code> polyfill.</div> -<h4 id="Compatibility_en_de_relatie_met_globalStorage">Compatibility en de relatie met globalStorage</h4> -<p class="note"><code>localStorage</code> is hetzelfde als <code>globalStorage[location.hostname]</code>, met de uitzondering dat deze gescoped is naar een HTML5 origin (scheme + hostname + non-standard port) en dat <code>localStorage</code> een instantie is van <code>Storage</code> in tegenstelling tot <code>globalStorage[location.hostname]</code> wat een instantie is van <code>StorageObsolete</code> welke hieronder wordt behandeld. Bijvoorbeeld, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is niet bereikbaar voor het <code>localStorage</code> object als <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> maar ze kunnen hetzelfde <code>globalStorage</code> item aanspreken. <code>localStorage</code> is een standaard interface terwijl <code>globalStorage</code> een non-standaard is, dus dien je niet er van uit te gaan dat deze beschikbaar is.</p> -<p>Merk op dat het zetten van een property op <code>globalStorage[location.hostname]</code> deze <strong>niet</strong> zet op <code>localStorage</code> en dat het uitbreiden van <code>Storage.prototype</code> geen effect heeft op <code>globalStorage</code> items, alleen het uitbreiden van <code>StorageObsolete.prototype</code> werkt.</p> -<h3 id="globalStorage"><code>globalStorage</code></h3> -<div> - {{ Non-standard_header }}{{ obsolete_header("13.0") }}</div> -<p><code>globalStorage </code>is verouderd sinds Gecko 1.9.1 (Firefox 3.5) en niet meer ondersteund sinds Gecko 13 (Firefox 13). Gebruik <code>{{ Anch("localStorage") }} </code>ter vervanging. Deze voorgestelde specificatie is verwijderd van de HTML5 specificatie ten gunste van <code>{{ Anch("localStorage") }}</code>, wat geimplementeerd is in Firefox 3.5. Dit is een globaal object (<code>globalStorage</code>) dat meerdere prive opslag ruimtes bijhoud die gebruikt kunnen worden om data over een langere periode op te slaan (bijv. gedurende meerdere pagina en browser sessies).</p> -<div class="warning"> - Note: <code>globalStorage</code> is niet een <code>Storage</code> instantie, maar een <code>StorageList</code> instantie dat <code>StorageObsolete</code> instanties bevat.</div> -<pre class="eval deki-transform">// Sla data op dat alleen scripts op het mozilla.org domein kunnen aanspreken -globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); -</pre> -<p>Specifiek, levert het <code>globalStorage</code> object toegang tot een aantal verschillende opslag objecten waar data in kan worden opgeslagen. Bijvoorbeeld, als we een web pagina maakten dat <code>globalStorage</code> gebruikte op dit domein (developer.mozilla.org) dan hadden we de volgende opslag object tot onze beschikking:</p> -<ul> - <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - Alle web paginas in een developer.mozilla.org sub-domein kan zowel lezen als schrijven in dit opslag object.</li> -</ul> -<p><strong>Voorbeelden:</strong></p> -<p>Elk van deze voorbeelden vereist dat je een script stopt (met de volgende code) in elke pagina waar je het resultaat wilt zien.</p> -<p>Onthoud een gebruikers gebruikersnaam voor het specifieke sub-domein dat wordt bezocht:</p> -<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); -</pre> -<p>Houd bij hoe vaak een gebruiker een pagina bezoekt op je domein:</p> -<pre class="eval deki-transform"> // parseInt moet gebruikt worden omdat alle dat als string wordt opgeslagen - globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); -</pre> -<h2 id="Opslag_locatie_en_weggooien_van_de_data">Opslag locatie en weggooien van de data</h2> -<p>In Firefox de DOM storage data wordt opgeslagen in het <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite bestand</a> in de profiel folder (er is ook een chromeappsstore.sqlite bestand dat gebruikt wordt om de browsers eigen data op te slaan, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">met name voor de start pagina - about:home</a>, maar mogelijk ook voor andere interne pagina met "about:" URLs).</p> -<ul> - <li>DOM Storage kan verwijderd worden via "Tools -> Clear Recent History -> Cookies" als de tijd bereik "Everyting" is (via nsICookieManager::removeAll) - <ul> - <li>Maar niet wanneer een andere tijd bereik is gespecificeerd: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> - <li>Verschijnt niet in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> - </ul> - </li> - <li>DOM Storage wordt <strong>niet</strong> verwijderd via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> - <li>Verschijnt niet in de "Tools -> Options -> Advanced -> Network -> Offline data" lijst, tenzij de site ook de offline cache gebruikt. Als de site wel verschijnt in de lijst, dan wordt de DOM storage data verwijderd samen met de <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> als er op de Verwijder knop wordt gedrukt.</li> -</ul> -<p>Zie ook <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> -<h2 id="Meer_informatie">Meer informatie</h2> -<ul> - <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> - <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> -</ul> -<h2 id="Voorbeelden">Voorbeelden</h2> -<ul> - <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - hands-on tutorial die beschrijft hoe de Web Storage API te gebruiken door een simpele adresboek applicatie te maken</li> - <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - laat een offline app demo zien en legt uit hoe het werkt.</li> - <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Notitie applicatie dat alle data lokaal opslaat.</li> - <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - Een gedeelde localStorage object interface dat door elke website kan worden aangesproken en werkt in Firefox 3+, Webkit 3.1.2+ nightlies, en IE8. Zie het als een pseudo-globalStorage[""] maar met schrijf toegang beschermd door gebruikers bevestiging.</li> - <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a>. Simpel en eenvoudig te begrijpen voorbeeld van localStorage. Slaat- en haalt teksten op en toont een lijst van opgeslagen items. Getest in Firefox 3 en hoger.</li> - <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a>. Een zeer simpel voorbeeld van sessionStorage. Bevat ook een voorbeeld van localStorage. Getest in Firefox 3.6 of hoger.</li> - <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> - <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> -</ul> -<h2 id="Browser_compatibility">Browser compatibility</h2> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>localStorage</td> - <td>4</td> - <td>3.5</td> - <td>8</td> - <td>10.50</td> - <td>4</td> - </tr> - <tr> - <td>sessionStorage</td> - <td>5</td> - <td>2</td> - <td>8</td> - <td>10.50</td> - <td>4</td> - </tr> - <tr> - <td>globalStorage</td> - <td>{{ CompatNo }}</td> - <td>2-13</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown }}</td> - <td>{{ CompatUnknown }}</td> - <td>{{ CompatUnknown }}</td> - <td>{{ CompatUnknown }}</td> - <td>iOS 3.2</td> - </tr> - </tbody> - </table> -</div> -<p>All browsers have varying capacity levels for both local- and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> -<div class="note"> - <p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p> -</div> -<h2 id="Related">Related</h2> -<ul> - <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li> - <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li> - <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> - <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> - <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li> - <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li> -</ul> -<div> - {{ HTML5ArticleTOC }}</div> |