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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!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">
 
<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 ng-bind="localStorageDemoValue"></p>
        <small>{{storageType}} value</small>
      </blockquote>
 
      <p><button ng-click="clearAll()">Clear All</button></p>
    </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>
 
  <!-- Sorry guys, I need to earn a living -->
  <div style="float: right">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- ALS Leaderboard -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:90px"
         data-ad-client="ca-pub-8242772837340688"
         data-ad-slot="1586567981"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
 
  <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="../src/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.set('localStorageKey','Add this!');
  // Read that value back
  var value = localStorageService.get('localStorageKey');
  // To remove a local storage
  localStorageService.remove('localStorageKey');
  // Removes all local storage
  localStorageService.clearAll();
  // You can also play with cookies the same way
  localStorageService.cookie.set('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>set</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 pairs from the browser local storage</td>
        <td>n/a</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>set | 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="https://rawgit.com/grevory/angular-local-storage/master/dist/angular-local-storage.min.js"></script>
<script src="demo-app.js"></script>
</body>
</html>