localstorage, dubbele items
Ik ben wat aan het testen met het offline beschikbaar maken van een website. Heb hiervoor het volgende als test online gezet: http://goo.gl/U2Wsh
Het werkt goed maar ik krijg af en toe dubbele items wanneer ik meer dan één item offline toevoeg. Bij het offline toevoegen van items worden deze in localstorage geplaatst. De volgende keer als je online komt worden deze middels ajax gepost en vervolgens verwijderd uit de localstorage. Dit werkt prima als er offline één item toegevoegd wordt, maar wanneer het er meerdere zijn gaat het vaak niet helemaal lekker.
Even naar de broncode kijken maar zal de code ook hier maar even plaatsen:
index.php
Code (php)
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
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
<?php
if($_POST){
file_put_contents('data.txt', implode(', ',$_POST)."\n", FILE_APPEND);
header('Location: http://**knip**/html5/');
}
if($_GET['delete']){
file_put_contents('data.txt', '');
header('Location: http://**knip**/html5/');
}
?>
<!DOCTYPE html>
<html manifest="manifest.php">
<head>
<meta charset="utf-8">
<title>HTML 5 Storage & Sync test</title>
</head>
<body>
<div id="status"></div>
<hr />
<form method="post" action="">
<input type="text" name="inputnaam1" />
<input type="text" name="inputnaam2" />
<input type="submit" value="Opslaan!" />
</form>
<hr />
<? echo nl2br(htmlspecialchars(file_get_contents('data.txt'))); ?>
<hr />
<a href="index.php?delete=1">Alles verwijderen</a>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
(function()
{
//Form submit?
$('form').submit(function()
{
//Offline?
if( ! navigator.onLine )
{
alert('Je bent nu niet verbonden met het internet! De gegevens zijn lokaal opgeslagen en worden zodra er een verbinding is gesynchroniseerd!')
//Set localStorage
localStorage.setItem(new Date().getTime(), $(this).serialize() );
//Empty inputs
$('input[type=text]').val('');
//Set status
$('#status').html('NIET gesynchroniseerd');
//Cancel submit
return false;
}
});
//Online?
if( navigator.onLine )
{
//Data to sync?
if(localStorage.length)
{
//Set status
$('#status').html('Bezig met synchroniseren...');
//Loop through localstorage
for(var i in localStorage)
{
//Send data with ajax
$.ajax({
url: 'http://**knip**/html5/save.php',
data: localStorage.getItem(i),
type: 'POST',
success: function(){
//Remove on success
localStorage.removeItem(i);
}
});
}
}
//Set status
$('#status').html('Gesynchroniseerd!');
} else {
//Something stored in localstorage?
if(localStorage.length)
{
//Set status
$('#status').html('NIET gesynchroniseerd');
} else {
//Set status
$('#status').html('Gesynchroniseerd!');
}
}
//Manifest (saved items) changed?
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
//Change cache files
window.applicationCache.swapCache();
//Reload page
window.location.reload();
}
}, false);
})();
</script>
</body>
</html>
if($_POST){
file_put_contents('data.txt', implode(', ',$_POST)."\n", FILE_APPEND);
header('Location: http://**knip**/html5/');
}
if($_GET['delete']){
file_put_contents('data.txt', '');
header('Location: http://**knip**/html5/');
}
?>
<!DOCTYPE html>
<html manifest="manifest.php">
<head>
<meta charset="utf-8">
<title>HTML 5 Storage & Sync test</title>
</head>
<body>
<div id="status"></div>
<hr />
<form method="post" action="">
<input type="text" name="inputnaam1" />
<input type="text" name="inputnaam2" />
<input type="submit" value="Opslaan!" />
</form>
<hr />
<? echo nl2br(htmlspecialchars(file_get_contents('data.txt'))); ?>
<hr />
<a href="index.php?delete=1">Alles verwijderen</a>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
(function()
{
//Form submit?
$('form').submit(function()
{
//Offline?
if( ! navigator.onLine )
{
alert('Je bent nu niet verbonden met het internet! De gegevens zijn lokaal opgeslagen en worden zodra er een verbinding is gesynchroniseerd!')
//Set localStorage
localStorage.setItem(new Date().getTime(), $(this).serialize() );
//Empty inputs
$('input[type=text]').val('');
//Set status
$('#status').html('NIET gesynchroniseerd');
//Cancel submit
return false;
}
});
//Online?
if( navigator.onLine )
{
//Data to sync?
if(localStorage.length)
{
//Set status
$('#status').html('Bezig met synchroniseren...');
//Loop through localstorage
for(var i in localStorage)
{
//Send data with ajax
$.ajax({
url: 'http://**knip**/html5/save.php',
data: localStorage.getItem(i),
type: 'POST',
success: function(){
//Remove on success
localStorage.removeItem(i);
}
});
}
}
//Set status
$('#status').html('Gesynchroniseerd!');
} else {
//Something stored in localstorage?
if(localStorage.length)
{
//Set status
$('#status').html('NIET gesynchroniseerd');
} else {
//Set status
$('#status').html('Gesynchroniseerd!');
}
}
//Manifest (saved items) changed?
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
//Change cache files
window.applicationCache.swapCache();
//Reload page
window.location.reload();
}
}, false);
})();
</script>
</body>
</html>
manifest.php
Code (php)
1
2
3
4
5
2
3
4
5
CACHE MANIFEST
index.php
http://code.jquery.com/jquery-1.8.2.min.js
<?='# data.txt: '.md5_file('data.txt')."\n";?>
<?='# index.php: '.md5_file('index.php');?>
index.php
http://code.jquery.com/jquery-1.8.2.min.js
<?='# data.txt: '.md5_file('data.txt')."\n";?>
<?='# index.php: '.md5_file('index.php');?>
save.php
Code (php)
Ik hoop dat jullie mij wat verder kunnen helpen! :)
Gewijzigd op 21/10/2012 18:09:28 door Roy -
localStorage.removeItem(i);
Die i zal niet meer de juiste waarde hebben wanneer de request terug komt.
Wat ik zou aanraden:
Code (php)
1
2
3
4
2
3
4
success: function(index){
//Remove on success
localStorage.removeItem(Number(index));
}
//Remove on success
localStorage.removeItem(Number(index));
}
en dan zou save.php die index moeten echo'en.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
for(var i in localStorage)
{
//Send data with ajax
$.ajax({
url: 'http://**knip**/html5/save.php',
data: localStorage.getItem(i),
type: 'POST',
success: function(){
//Remove on success
localStorage.removeItem(i);
}
});
}
{
//Send data with ajax
$.ajax({
url: 'http://**knip**/html5/save.php',
data: localStorage.getItem(i),
type: 'POST',
success: function(){
//Remove on success
localStorage.removeItem(i);
}
});
}
Dan kan ik mij niets voorstellen waardoor "i" zou veranderen.
save.php
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
for(var i =0; i<5; i++)
{
//Send data with ajax
$.ajax({
url: 'save.php',
data: {index: i},
type: 'POST',
success: function(data) {
$('#message').append(
'data: ' + data + ' - index: ' + i + '<br>'
);
}
});
}
});
</script>
<div id="message"></div>
<script>
$(document).ready(function($) {
for(var i =0; i<5; i++)
{
//Send data with ajax
$.ajax({
url: 'save.php',
data: {index: i},
type: 'POST',
success: function(data) {
$('#message').append(
'data: ' + data + ' - index: ' + i + '<br>'
);
}
});
}
});
</script>
<div id="message"></div>
Dit is wat je op je scherm krijgt
Code (php)
1
2
3
4
5
2
3
4
5
data: 0 - index: 5
data: 1 - index: 5
data: 2 - index: 5
data: 3 - index: 5
data: 4 - index: 5
data: 1 - index: 5
data: 2 - index: 5
data: 3 - index: 5
data: 4 - index: 5
Ajax is asynchroon. De for-lus zal niet wachten tot het eerste verzoek klaar is vooraleer het aan de volgende begint.
Tegen het moment dat de eerste request terug is, is de for-lus al lang klaar, en blijft die i steken op de waarde van de laatste iteratie (nu ja ... +1).
Gewijzigd op 22/10/2012 14:41:11 door Kris Peeters
EDIT:
Het lijkt nu goed te gaan!
save.php
Code (php)
wijziging in index.php
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$.ajax({
url: 'http://**knip**/html5/save.php',
data: 'index=' + i + '&' + localStorage.getItem(i),
type: 'POST',
success: function(data){
//Remove on success
localStorage.removeItem(data);
}
});
url: 'http://**knip**/html5/save.php',
data: 'index=' + i + '&' + localStorage.getItem(i),
type: 'POST',
success: function(data){
//Remove on success
localStorage.removeItem(data);
}
});
Hartelijk dank!
Gewijzigd op 22/10/2012 14:54:59 door Roy -
Leuk script, trouwens.