You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
4.8 KiB
HTML
138 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<title>Demo of Angular Local Storage Module</title>
|
|
<meta name="description" content="Demo of Angular Local Storage Module">
|
|
<meta name="author" content="Gregory Pike">
|
|
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
|
|
<!--[if IE]><![endif]--><!-- Used to speed CSS loading -->
|
|
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
|
|
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
|
|
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet">
|
|
<link href="demo-style.css" rel="stylesheet">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<body onload="prettyPrint()">
|
|
|
|
<!-- BEGIN DEMO -->
|
|
|
|
<div class="container" ng-app="demoModule">
|
|
|
|
<div class="navbar navbar-inverse">
|
|
<div class="navbar-inner">
|
|
<a class="brand" href="#">Angular Local Storage</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-unit">
|
|
|
|
<h1>Give it a try</h1>
|
|
|
|
<div ng-controller="DemoCtrl">
|
|
<p><input type="text" ng-model="localStorageDemo" placeholder="Start typing..."></p>
|
|
|
|
<blockquote class="well" ng-show="localStorageDemoValue">
|
|
<p>{{localStorageDemoValue}}</p>
|
|
<small>{{storageType}} value</small>
|
|
</blockquote>
|
|
</div>
|
|
|
|
<p>The Angular Local Storage Module is meant to be a plug-and-play Angular module for accessing the browsers Local Storage API.</p>
|
|
|
|
</div>
|
|
|
|
<p>Angular Local Storage offers you access to the browser local storage API through Angular but also allows has the following features:</p>
|
|
|
|
<ul>
|
|
<li>Control local storage access through key prefices (e.g. "myApp.keyName")</li>
|
|
<li>Checks browser support and falls back to cookies for antiquated browsers</li>
|
|
<li>Allows programmatic access to remove all keys for a given app</li>
|
|
</ul>
|
|
|
|
<h3>Usage</h3>
|
|
|
|
<h6>Dependencies:</h6>
|
|
<ul>
|
|
<li><code>AngularJS</code> <small><a href="http://angularjs.org/">http://angularjs.org/</a></small></li>
|
|
<li><code>Angular Local Storage Module</code> <small><a href="../angular-local-storage.js">angular-local-storage.js</a></small></li>
|
|
</ul>
|
|
|
|
<h6>JS Example</h6>
|
|
<pre class="prettyprint lang-js">
|
|
var YourCtrl = function($scope, localStorageService, ...) {
|
|
// To add to local storage
|
|
localStorageService.add('localStorageKey','Add this!');
|
|
// Read that value back
|
|
var value = localStorageService.get('localStorageKey');
|
|
// You can also play with cookies the same way
|
|
localStorageService.cookie.add('localStorageKey','I am a cookie value now');
|
|
}</pre>
|
|
|
|
<h3>API Access</h3>
|
|
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Call</th>
|
|
<th>Arguments</th>
|
|
<th>Action</th>
|
|
<th>Returns</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>isSupported</code></td>
|
|
<td class="muted"><small>n/a</small></td>
|
|
<td>Checks the browsers support for local storage</td>
|
|
<td>Boolean for success</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>add</code></td>
|
|
<td><small>key, value</small></td>
|
|
<td>Adds a key-value pair to the browser local storage</td>
|
|
<td>Boolean for success</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>get</code></td>
|
|
<td><small>key</small></td>
|
|
<td>Gets a value from local storage</td>
|
|
<td>Stored value</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>remove</code></td>
|
|
<td><small>key</small></td>
|
|
<td>Removes a key-value pair from the browser local storage</td>
|
|
<td>Boolean for success</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>clearAll</code></td>
|
|
<td class="muted">n/a</td>
|
|
<td><span class="label label-warning">Warning</span> Removes all local storage key-value pairs for this app. It will optionally take a string, which is converted to a regular expression, and then clears keys based on that regular expression.</td>
|
|
<td>Boolean for success</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>cookie</code></td>
|
|
<td><small>add | get | remove | clearAll</small></td>
|
|
<td>Each function within cookie uses the same arguments as the coresponding local storage functions</td>
|
|
<td>n/a</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<!-- END DEMO -->
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
|
|
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
|
|
<script src="../angular-local-storage.min.js"></script>
|
|
<script src="demo-app.js"></script>
|
|
</body>
|
|
</html>
|