simple-localStorage-object-cache/test.html at master · neuerituale/simple-localStorage-object-cache · GitHub

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
<html>

<style>
	* { font-family: sans-serif; }
	h4 { margin-top: 0; }
	#action { display: flex; }
	#action > div { border: 1px solid gray; padding: 1rem; margin-left: 1rem }
	#action > div:first-child { margin-left: 0 }
	#console { border:1px solid black; padding: 1rem; margin-top: 1rem }
</style>

<body>

	<h1>Test localStorage</h1>
	<p>set, get or remove strings, integer and objects</p>

	<div id="action">
		<div>
			<h4>Storage 1 (myStore)</h4>
			<button onclick="writeToL1()">Write</button>
			<button onclick="readFromL1()">Read</button>
			<button onclick="clearL1()">Clear</button>
		</div>
		<div>
			<h4>Storage 2 (yourStore)</h4>
			<button onclick="writeToL2()">Write</button>
			<button onclick="readFromL2()">Read</button>
			<button onclick="clearL2()">Clear</button>
		</div>
		<div>
			<h4>Raw data from localStorage</h4>
			<button onclick="readLocalStorage()">Read All</button>
			<button onclick="clearAll()">Clear All</button>
		</div>
	</div>

	<div id="console">...</div>

	<script type="text/javascript" src="dist/localStorageCache.js"></script>
	<script>
		var l1 = new LocalStorageCache('myStore');
		var l2 = new LocalStorageCache('yourStore');
		var object = {
			string: 'HELO WORLD',
			number: 100,
			subObject: {
				test: 1,
				test2: 2,
				test3: '3'
			}
		};
		var number = 42;
		var string = 'HELLO WORLD';
		var htmlConsole = document.getElementById('console');

		function writeToL1(){
			l1.set('number', number);
			l1.set('string', string);
			l1.set('object', object);
			htmlConsole.innerHTML = 'a number, string and object are stored in localStorage with the prefix \'myStore\' <br>-------------------------------------------';
		}

		function writeToL2(){
			l2.set('number', number);
			l2.set('string', string);
			l2.set('object', object);
			htmlConsole.innerHTML = 'a number, string and object are stored in localStorage with the prefix \'yourStore\' <br>-------------------------------------------';
		}

		function readFromL1(){
			var result = '';
			result += 'typeof number: ' + typeof l1.get('number') + '<br>';
			result += 'typeof string: ' + typeof l1.get('string') + '<br>';
			result += 'typeof object: ' + typeof l1.get('object') + '<br>';
			result += '-------------------------------------------';
			htmlConsole.innerHTML = result;
		}

		function readFromL2(){
			var result = '';
			result += 'typeof number: ' + typeof l2.get('number') + '<br>';
			result += 'typeof string: ' + typeof l2.get('string') + '<br>';
			result += 'typeof object: ' + typeof l2.get('object') + '<br>';
			result += '-------------------------------------------';
			htmlConsole.innerHTML = result;
		}

		function clearL1(){
			l1.clear();
			htmlConsole.innerHTML = '\'myStore\' is cleared <br>-------------------------------------------';
		}

		function clearL2(){
			l2.clear();
			htmlConsole.innerHTML = '\'yourStore\' is cleared <br>-------------------------------------------';
		}

		function readLocalStorage(){
			var result = '';
			var empty = true;
			for(var i in localStorage){
				empty = false;
				if(localStorage.hasOwnProperty(i)){
					result += ''+i+': ' + localStorage.getItem(i) + '<br>';
				}
			}
			if(empty) {
				result = 'store is clear <br>';
			}
			result += '-------------------------------------------';
			htmlConsole.innerHTML = result;

		}

		function clearAll(){
			localStorage.clear();
			htmlConsole.innerHTML = 'All clear <br>-------------------------------------------';
		}
	</script>

</body>
</html>