forked from Maultasche/knockout.observableStorage
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (123 loc) · 4.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>knockout.observableStorage Example Page</title>
<style type="text/css">
.textsection
{
margin-top: 10px;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
This page contains examples of using knockout.observableStorage. It won't always work when loaded into
the browser as a file, as some browers don't allow storage events to be fired when loaded from a file.
It has to be loaded from a web server to get full functionality.
<br />
<br />
<p>
<a target="_blank" href="" class="btn btn-primary">Open a another instance of this page</a>
</p>
</div>
</div>
<p>
<div class="panel panel-default">
<div class="panel-heading"><strong>Default Observable</strong></div>
<div class="panel-body">
<div class="textsection">This is an ordinary observable. It will not be persisted after
a page reload</div>
<div class="textsection input-group">
<label for="default">Observable Value:</label>
<input id="default" class="form-control" data-bind="textInput: defaultValue"></input>
</div>
<div class="textsection">
<span data-bind="text: defaultValue" ></span>
</div>
</div>
</div>
</p>
<p>
<div class="panel panel-default">
<div class="panel-heading"><strong>Local Storage Observable</strong></div>
<div class="panel-body">
<div class="textsection">This observable will be persisted when the page is refreshed and will sync
with other instances of this page in different tabs and windows. You can also change the local storage
value via the developer tools and watch it update on the page.</div>
<div class="textsection input-group">
<label for="local">Observable Value:</label>
<input id="local" class="form-control" data-bind="textInput: localStorageValue"></input>
</div>
<div class="textsection">
<span data-bind="text: localStorageValue"></span>
</div>
</div>
</div>
</p>
<p>
<div class="panel panel-default">
<div class="panel-heading">
<strong>Session Storage Observable</strong>
</div>
<div class="panel-body">
<div class="textsection">This observable will be persisted when the page is refreshed, but it is
local to the browser tab. Other tabs will not share the value and the value will disappear.
when the tab is closed. You can also change the local storage value via the developer tools
and watch it update on the page.</div>
<div class="textsection input-group">
<label for="session">Observable Value:</label>
<input id="session" class="form-control" data-bind="textInput: sessionStorageValue"></input>
</div>
<div class="textsection">
<span data-bind="text: sessionStorageValue"></span>
</div>
</div>
</p>
<p>
<div class="panel panel-default">
<div class="panel-heading">
<strong>Custom Observable</strong>
</div>
<div class="panel-body">
<div class="textsection">This observable will be persisted using custom get/set methods.
In this particular example, the custom get/set methods read and write to a Javascript
variable, but they could contain code to persist values to a server.</div>
<div class="textsection input-group">
<label for="custom">Observable Value:</label>
<input id="custom" class="form-control" data-bind="textInput: customStorageValue"></input>
</div>
<div class="textsection">
<span data-bind="text: customStorageValue" ></span>
</div>
</div>
</p>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/knockout-3.4.0.min.js"></script>
<script src="../knockout.observableStorage.js"></script>
<script>
var customValue = "Custom Value";
var viewModel = {
// Default Observable
defaultValue: ko.observable(),
// Observable bound to local storage
localStorageValue: ko.observable("Local Storage Value")
.extend({ persist: {local: "localKey"} }),
// Observable bound to session storage
sessionStorageValue: ko.observable("Session Storage Value")
.extend({ persist: {session: "sessionKey"} }),
// Observable bound to custom storage
customStorageValue: ko.observable('Custom Storage Value')
.extend({ persist: { get: getCustomValue, set: getCustomValue } })
};
function getCustomValue() {
return customValue;
}
function setCustomValue(value) {
customValue = value;
}
ko.applyBindings(viewModel);
</script>
</body>
</html>