metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Metro 4 provides special object to work with browser the session storage engine. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Session storage - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Session storage</a></li> <li class="toc-entry"><a href="#_storage_about">About storage</a></li> <li class="toc-entry"><a href="#_storage_init">Init storage</a></li> <li class="toc-entry"><a href="#_storage_set">Store data</a></li> <li class="toc-entry"><a href="#_storage_get">Get data</a></li> <li class="toc-entry"><a href="#_storage_del">Delete data</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Session storage</h1> <p class="text-leader"> Metro 4 provides special object to work with browser session storage engine. </p>  <h3 id="_storage_about">About</h3> <p> Object fro work with <code>session storage</code> defined in <code>Metro.session</code> and contains next methods: </p> <ul> <li><strong>setKey(key)</strong> - define main storage key (default: "METRO:APP")</li> <li><strong>setKey()</strong> - get main storage key</li> <li><strong>setItem(key, value)</strong> - store any data to key</li> <li><strong>getItem(key, default)</strong> - get stored values with key.</li> <li><strong>getItemPart(key, sub_key, default)</strong> - get part of stored values with key.</li> <li><strong>delItem(key)</strong> - delete data with key.</li> </ul> <h3 id="_storage_init">Init storage</h3> <p> To init storage execute method <code>setKey</code>. This method sets key for your app data in storage. This is a prefix for all your stored data. Method <code>getKey</code> return main key. </p> <pre><code class="html"> Metro.session.setKey('MY_APP'); Metro.session.getKey(); </code></pre> <h3 id="_storage_set">Store data</h3> <p> To store data in storage execute method <code>setItem</code>. </p> <pre><code class="javascript"> var key = 'user', data = { 'Bill': { 'FirstName': 'Billy', 'LastName': 'Gates', 'Company': 'Microsoft' }, 'Steve': { 'FirstName': 'Steve', 'LastName': 'Jobs', 'Company': 'Apple' } }; Metro.session.setItem(key, data); </code></pre> <h3 id="_storage_get">Get data</h3> <p> To get data you can use methods: <code>getItem</code> or <code>getItemPart</code>. Method <code>getItem</code> return data stored with <code>key</code>. Method <code>getItemPart</code> return part of data stored with <code>key</code>. </p> <h4>getItem</h4> <p> This method have next parameters: <code>key</code> - key for stored data, <code>default</code> - value returned if key not exist in storage. </p> <pre><code class="javascript"> var key = 'user', default_value = {}; Metro.session.getItem(key, default_value); </code></pre> <h4>getItemPart</h4> <p> This method have next parameters: <code>key</code> - key for stored data, <code>sub_key</code> - subkey for stored data, <code>default</code> - value returned if key not exist in storage. </p> <pre><code class="javascript"> var key = 'user', subkey = 'Bill', subkey2 = 'Bill->LastName', default_value = {}; Metro.session.getItemPart(key, subkey, default_value); Metro.session.getItemPart(key, subkey2, default_value); </code></pre> <h3 id="_storage_del">Delete data</h3> <p> To delete data you can use method <code>delItem</code>. </p> <pre><code class="javascript"> var key = 'user'; Metro.session.delItem(key); </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>