Compare Revisions

DOM Storage guide

Revision 464487:

Revision 464487 by Sheppy on

Revision 465391:

Revision 465391 by kscarfone on

Title:
DOM Storage guide
DOM Storage guide
Slug:
Web/Guide/API/DOM/Storage
Web/Guide/API/DOM/Storage
Tags:
"Offline web applications","Storage","NeedsMobileBrowserCompatibility","HTML5","JavaScript","DOM"
"Offline web applications","Storage","NeedsMobileBrowserCompatibility","HTML5","JavaScript","DOM","WebAPI","Guide"
Content:

Revision 464487
Revision 465391
n28      Mozilla-based browsers, Internet Explorer 8+, Safari 4+ andn28      Mozilla-based browsers, Internet Explorer 8+, Safari 4+, an
> Chrome all provide a working implementation of the DOM Storage s>d Chrome all provide a working implementation of the DOM Storage 
>pecification. (In case you need this functionality cross-browser >specification. (In case you need this functionality cross-browser
>and you need to cater for older versions of IE, it may be useful > and you need to cater for older versions of IE, it may be useful
>to note that Internet Explorer also has a similar legacy feature > to note that IE also has a similar legacy feature called "<a cla
>called "<a class="external" href="http://msdn.microsoft.com/en-us>ss="external" href="http://msdn.microsoft.com/en-us/library/ms531
>/library/ms531424(VS.85).aspx">userData behavior</a>" that predat>424(VS.85).aspx">userData behavior</a>" that pre-dates the additi
>es the addition of DOM Storage to IE in IE8.)>on of DOM Storage to IE in IE8.)
n37      While the concept, and implementation, presented in halfnotn37      While the concept, and implementation, presented in halfnot
>e was comparatively simple, its creation shows the possibility fo>e were comparatively simple, halfnote's creation shows the possib
>r a new breed of web applications that are usable both online and>ility for a new breed of web applications that are usable both on
> offline.>line and offline.
n43      The following are global objects that exist as properties on43      The following are global objects that exist as properties o
>f every <a href="/en-US/docs/DOM/window" title="DOM/window"><code>f every <a href="/en-US/docs/DOM/window" title="DOM/window"><code
>>window</code> object</a>. This means that they can be accessed a>>window</code> object</a>. This means that they can be accessed a
>s <code>sessionStorage</code> or <code>window.sessionStorage</cod>s <code>sessionStorage</code> or <code>window.sessionStorage</cod
>e>. (This is important because you can then use IFrames to store,>e>. (This is important because you can then use IFrames to store,
> or access, additional data, beyond what is immediately included > or access, additional data beyond what is immediately included i
>in your page.)>n your page.)
n80// Save data to a the current session's storen80// Save data to the current session's store
n96      Autosave the contents of a text field, and if the browser in96      Autosave the contents of a text field, and if the browser i
>s accidentally refreshed, restore the text field contents, so tha>s accidentally refreshed, restore the text field contents so that
>t no writing is lost.> no writing is lost.
n130      <strong>Note:</strong> When the browser goes into private bn130      <strong>Note:</strong> When the browser goes into private b
>rowsing mode, a new, temporary database is created to store local>rowsing mode, a new, temporary database is created to store local
> storage data; this database is emptied, and is thrown away when > storage data; this database is emptied and thrown away when priv
>private browsing mode is turned off.>ate browsing mode is turned off.
n139      This algorithm is an exact imitation of the <code>localStorn139      This algorithm is an exact imitation of the <code>localStor
>age</code> object, but making use of cookies.>age</code> object, but makes use of cookies.
n204      <strong>Note:</strong> The maximum size of data that can ben204      <strong>Note:</strong> The maximum size of data that can be
> saved is severely restricted by the use of cookies. With this al> saved is severely restricted by the use of cookies. With this al
>gorithm, use the functions <code>localStorage.setItem()</code> an>gorithm, use the functions <code>localStorage.setItem()</code> an
>d <code>localStorage.removeItem()</code> to add, change or remove>d <code>localStorage.removeItem()</code> to add, change, or remov
> a key. The use of methods <code>localStorage.yourKey = yourValue>e a key. The use of methods <code>localStorage.yourKey = yourValu
>;</code> and <code>delete localStorage.yourKey;</code> to set or >e;</code> and <code>delete localStorage.yourKey;</code> to set or
>delete a key <strong>is not a secure way with this code</strong>.> delete a key <strong>is not a secure way with this code</strong>
> You can also change its name and use it only to manage a documen>. You can also change its name and use it only to manage a docume
>t's cookies regardless of the localStorage object.>nt's cookies regardless of the localStorage object.
n241      <strong>Note:</strong> The maximum size of data that can ben241      <strong>Note:</strong> The maximum size of data that can be
> saved is severely restricted by the use of cookies. With this al> saved is severely restricted by the use of cookies. With this al
>gorithm, use the functions <code>localStorage.getItem()</code>, <>gorithm, use the functions <code>localStorage.getItem()</code>, <
>code>localStorage.setItem()</code> and <code>localStorage.removeI>code>localStorage.setItem()</code>, and <code>localStorage.remove
>tem()</code> to get, add, change or remove a key. The use of meth>Item()</code> to get, add, change, or remove a key. The use of me
>od <code>localStorage.yourKey</code> in order to get, set or dele>thod <code>localStorage.yourKey</code> in order to get, set, or d
>te a key <strong>is not permitted with this code</strong>. You ca>elete a key <strong>is not permitted with this code</strong>. You
>n also change its name and use it only to manage a document's coo> can also change its name and use it only to manage a document's 
>kies regardless of the localStorage object.>cookies regardless of the localStorage object.
n253      Please note that setting a property on <code>globalStorage[n253      Please note that setting a property on <code>globalStorage[
>location.hostname]</code> does <strong>not</strong> set it on <co>location.hostname]</code> does <strong>not</strong> set it on <co
>de>localStorage</code> and extending <code>Storage.prototype</cod>de>localStorage</code> and extending <code>Storage.prototype</cod
>e> does not affect <code>globalStorage</code> items, only extendi>e> does not affect <code>globalStorage</code> items; only extendi
>ng <code>StorageObsolete.prototype</code> does.>ng <code>StorageObsolete.prototype</code> does.
n262      <code>globalStorage</code> is obsolete since Gecko 1.9.1 (Fn262      <code>globalStorage</code> is obsolete since Gecko 1.9.1 (F
>irefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use>irefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use
> <code>{{ Anch("localStorage") }}</code> instead. This proposed a> <code>{{ Anch("localStorage") }}</code> instead. This proposed a
>ddition to HTML5 has been removed from the HTML5 specification in>ddition to HTML5 has been removed from the HTML5 specification in
> favor of <code>{{ Anch("localStorage") }}</code>, which is imple> favor of <code>{{ Anch("localStorage") }}</code>, which is imple
>mented in Firefox 3.5. This is a global object (<code>globalStora>mented in Firefox 3.5. This is a global object (<code>globalStora
>ge</code>) that maintains multiple private storage areas that can>ge</code>) that maintains multiple private storage areas that can
> be used to hold data over a long period of time (e.g. over multi> be used to hold data over a long period of time (e.g., over mult
>ple pages and browser sessions).>iple pages and browser sessions).
n337        <a class="external" href="http://www.diveintojavascript.cn337        <a class="external" href="http://www.diveintojavascript.c
>om/tutorials/web-storage-tutorial-creating-an-address-book-applic>om/tutorials/web-storage-tutorial-creating-an-address-book-applic
>ation" title="JavaScript Web Storage Tutorial: Creating an Addres>ation" title="JavaScript Web Storage Tutorial: Creating an Addres
>s Book Application">JavaScript Web Storage Tutorial: Creating an >s Book Application">JavaScript Web Storage Tutorial: Creating an 
>Address Book Application</a> - hands-on tutorial describing how t>Address Book Application</a> - Hands-on tutorial describing how t
>o use the Web Storage API by creating a simple address book appli>o use the Web Storage API by creating a simple address book appli
>cation>cation.
338      </li>
339      <li>338      </li>
339      <li>
340        <a class="external" href="http://hacks.mozilla.org/2010/0340        <a class="external" href="http://hacks.mozilla.org/2010/0
>1/offline-web-applications/" title="http://hacks.mozilla.org/2010>1/offline-web-applications/" title="http://hacks.mozilla.org/2010
>/01/offline-web-applications/">offline web applications</a> at ha>/01/offline-web-applications/">offline web applications</a> at ha
>cks.mozilla.org - showcases an offline app demo and explains how >cks.mozilla.org - Showcases an offline app demo and explains how 
>it works.>it works.
n349        <a class="external" href="http://codebase.es/test/webstorn349        <a class="external" href="http://codebase.es/test/webstor
>age.html" title="http://codebase.es/test/webstorage.html">HTML5 l>age.html" title="http://codebase.es/test/webstorage.html">HTML5 l
>ocalStorage example</a>. Very simple and easy to understand examp>ocalStorage example</a> - Very simple and easy to understand exam
>le of localStorage. Saves and retrieves texts and shows a list of>ple of localStorage. Saves and retrieves texts and shows a list o
> saved items. Tested in Firefox 3 or higher.>f saved items. Tested in Firefox 3 or higher.
350      </li>
351      <li>350      </li>
351      <li>
352        <a class="external" href="http://upload.jonathanwilsson.c352        <a class="external" href="http://upload.jonathanwilsson.c
>om/html5/sessionstorage.php" title="http://upload.jonathanwilsson>om/html5/sessionstorage.php" title="http://upload.jonathanwilsson
>.com/html5/sessionstorage.php">HTML5 Session Storage</a>. A very >.com/html5/sessionstorage.php">HTML5 Session Storage</a> - A very
>simple example of session storage. Also includes a example on loc> simple example of session storage. Also includes a example on lo
>al storage. Tested in Firefox 3.6 or higher.>cal storage. Tested in Firefox 3.6 or higher.
t500      All browsers have varying capacity levels for both local- at500      All browsers have varying capacity levels for both localSto
>nd sessionStorage. Here is a <a class="external" href="http://dev>rage and sessionStorage. Here is a <a class="external" href="http
>-test.nemikor.com/web-storage/support-test/" title="http://dev-te>://dev-test.nemikor.com/web-storage/support-test/" title="http://
>st.nemikor.com/web-storage/support-test/">detailed rundown of all>dev-test.nemikor.com/web-storage/support-test/">detailed rundown 
> the storage capacities for various browsers</a>.>of all the storage capacities for various browsers</a>.

Back to History