forked from grevory/angular-local-storage
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
137 lines (116 loc) · 4.69 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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="LocalStorageModule">
<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="localStorageModule.js">localStorageModule.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.</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="localStorageModule.js"></script>
<script src="demo-app.js"></script>
</body>
</html>