forked from medialize/jQuery-store
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (115 loc) · 3.88 KB
/
index.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
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>$.store jQuery plugin</title>
<meta name="title" content="$.store() jQuery plugin" />
<meta name="description" content="Persistently storing data on the client side" />
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.store.js"></script>
<script type="text/javascript">
(function($,undefined){
// initialize storage API
$.storage = new $.store();
// build some demo interface
var $buttons;
var log = function( m )
{
$('<p>'+ m +'</p>').insertAfter( $buttons );
}
var poll = function()
{
log( $.storage.get( 'event' ) );
}
var push = function()
{
$.storage.set( 'event', new Date() );
}
$(function()
{
$buttons = $( '<div></div>' ).prependTo( $( document.body ) );
$( '<button type="button">start writing</button>' ).appendTo( $buttons ).bind( 'click', function()
{
window.setInterval( push, 500 );
});
$( '<button type="button">start reading</button>' ).appendTo( $buttons ).bind( 'click', function()
{
window.setInterval( poll, 1000 );
});
});
})(jQuery);
</script>
<script type="text/javascript" src="jquery.windowSync.js"></script>
</head>
<body>
<script type="text/javascript">
document.write( '<p>Initialized $.storage with driver ' + $.storage.driver.ident + '</p>' );
</script>
<h1>$.store</h1>
<p>
<code>$.store</code> is a simple, yet easily extensible, plugin to persistently store data on the client side of things.
It uses <code>window.localStore</code> where available. Older Internet Explorers will use <code>userData</code>.
If all fails <code>$.store</code> will save your data to <code>window.name</code>.
</p>
<p>
Note: The <code>windowName</code> will only do JSON serialization. <code>windowName</code>
is not persistent in the sense of making it accross a closed browser window. If you need
that ability you should check <code>$.storage.driver.scope == "browser"</code>.
</p>
<h2>Usage</h2>
<pre>//initialize
$.storage = new $.store();
// save a value
$.storage.set( key, value );
// read a value
$.storage.get( key );
// deletes a value
$.storage.del( key );
// returns a list of all keys in the local storage
$.storage.keys();
// delete all values
$.storage.flush();</pre>
<h2>Adding Serializers</h2>
<p>
You can easily add your own serializers to the stack.
Make sure to add them before initializing the <code>$.store</code>.
Note: Serializers do not apply to the <code>windowName</code> storage driver.
</p>
<pre>$.store.serializers.yaddayadda = {
ident: "$.store.serializers.yaddayadda",
init: function( encoders, decoders )
{
// register your serializer with en/decoder stack
encoders.unshift( "yaddayadda" );
decoders.push( "yaddayadda" );
},
isYaddaYadda: function( value )
{
// determine if value should be processed by this serializer
return true;
},
encode: function( value )
{
// check if the value can be encoded
if( !value || value._serialized || !this.isYaddaYadda( value ) )
return value;
// prepare serialized-data-wrapper
var _value = { _serialized: this.ident, value: value };
// work your magic
_value.value = "serializedVersionOf data";
return value;
},
decode: function( value )
{
// check if the value can be decoded
if( !value || !value._serialized || value._serialized != this.ident )
return value;
// work your magic
value.value = "unserializedVersionOf data";
return this.isYaddaYadda( value.value ) ? value.value : undefined;
}
};</pre>
</body>
</html>