-
Notifications
You must be signed in to change notification settings - Fork 0
/
3.localStorage.html
101 lines (85 loc) · 2.45 KB
/
3.localStorage.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
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
// Detection:
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
}
catch (e) { return false; }
}
//if (Modernizr.localstorage){}
var doAlert = false;
// Usage/Example
$("#AddValue").click(function() {
localStorage[$("#key").val()] = $("#value").val();
if (doAlert) alert("added");
});
$("#RemoveValue").click(function() {
localStorage.removeItem($("#key").val());
if (doAlert) alert("removed");
});
$("#ClearAll").click(function() {
localStorage.clear();
if (doAlert) alert("cleared");
});
$("#PrintAll").click(function() {
var i, keyValues = "Key/Values in Storage: " + localStorage.length + "<br>";
for (i = 0; i < localStorage.length; i++) {
keyValues += localStorage.key(i) + " => ";
keyValues += localStorage[localStorage.key(i)];
keyValues += "<br>";
}
$("#allValues").html(keyValues);
});
if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
var changed = "";
changed += "key: " + e.key + "<br>";
changed += "oldValue: " + e.oldValue + "<br>";
changed += "newValue: " + e.newValue + "<br>";
changed += "" + (e.url ? "url: " + e.url : "uri: " + e.uri) + "<br>";
$("#changeTracker").html(changed);
}
});
</script>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<div id=adding>
<h1>localStorage Manipulation</h1>
<input type=text id=key /><br>
<input type=text id=value /><br>
<input type=button id="AddValue" value="Add to storage">
<input type=button id="RemoveValue" value="Remove key from storage"><br><br>
<input type=button id="ClearAll" value="Clear storage">
</div>
<div>
<h2><a href="http://sangu.be/test/3.localStorage.html" target=_blank>localStorage changes</a></h2>
<div id="changeTracker"></div>
</div>
<div>
<h1>Print all values</h1>
<input type=button id=PrintAll value="Print all values"><br>
<div id="allValues">
</div>
</div>
<div style="text-align: right">
<a href="5.geolocation.html">Geolocation</a>
</div>
</body>
</html>