Local storage issue in HTML 5 / Javascript - javascript

I am making a checklist app with Phonegap but it debugs in a browser too as they both use web technologies. Anyway, I am having a problem with using the HTML 5 local storage. Perhaps my code is broken, or I am using it wrong. When ever I refresh the page or exit out/come back the data is gone.
Appreciate any help :^)
I tested it on my live domain as well as locally but both do not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script>
$(function() {
var arr = [];
var i;
$("button").click(function() {
arr.push($(":text").val());
$(":text").val("");
localStorage.setItem("item" + arr.length, arr[arr.length - 1]);
$("#x").append(localStorage.getItem("item" + arr.length) + "<br>");
})
})
</script>
</head>
<body>
<div class="app">
<h1>Alex</h1>
<input type="text" id="item" placeholder="Enter an item">
<button id="add">Add Item</button>
<br>
<div id="x"></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>

As was said - the data is persisted and saved correctly.
However the logic is incorrect and overrides all the elements in the localStorage (first element overrides the first, second overrides the first two, third overrides the first three, etc.). Perhaps this is what masks the issue? :)
To be frank, I don't the the logic of running in loop and overriding all existing with the last item (and writing it to the list on the screen each time)...

Related

pagecontainer #change - JqueryMobile - Phonegap

I have a phonegap/jquerymobile app that I can't seem to get pagecontainer #change to work for. I have tried the most up to date syntax I could find, but seem to be missing something.
function goToCards() {
console.log('got to goToCards');
$(':mobile-pagecontainer').pagecontainer('change', '#cardsPage');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>BibHub Mobile</title>
</head>
<body>
<div class="app" data-role="page" id="loginPage">
<div data-role="header">
<h1>Biphub</h1>
</div>
<div data-role="content">
go to cards
</div>
</div>
<div class="app" data-role="page" id="cardsPage">
<div data-role="header">
<h1>Biphub</h1>
<h2>Your UID is <span id="uidSpan"></span></h2>
</div>
<div data-role="content">
<p>Your card stack is currently empty. Way to go!</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
When I run the app in xcode I successfully log 'got to goToCards'. However, there is no page change or any error. A normal non-js function link works to transition the page. Any ideas?
The pagecontainer widget and its methods were introduced in jQuery Mobile version 1.4. You appear to be using a really old version (1.0). Can you upgrade both jQuery and jQuery Mobile versions?
If not, you need to use $.mobile.changePage : API DOC

Ajax will not load when FTP is loaded

I'm just trying to get the hang of using Ajax with FTP so it'll load my changes in real-time. However, not matter how I change the code it just won't do what i want it to and to my knowledge the code itself seems fine...All it's suppose to do is alert the contents of my test.html file ("this is some content") when I load it into the ftp.
Learning JQuery
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="jquery.min.js">
</script>
<link rel="stylesheet" type="text/css" href="CSS/jquery.css">
</head>
<body>
<h1>Asyncronous Javascript And XML </h1>
<script type="text/javascript" src="JS/index.js"></script>
</body>
</html>
Ajax:
$.get("test.html", function(data) {
alert(data);
});

How to get localStorage to work on a todolist-app

I have no clue how localStorage works and I need it for my project. I'm doing a todolist-app and I need to save the items so the user can turn off the app and that the list is still there when they open the app again. How do I do that?
<!DOCTYPE html>
<html manifest = offline.appcache>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="favicon.ico">
<link href="main.css" type="text/css" rel="stylesheet">
<title>Inköpslista</title>
</head>
<body>
<div id="kol1" class="kol">
<h1>Inköp</h1>
<input type="image" src="img/button.png" alt="Submit" id="storknapp" onclick="klickaKnapp('skriva')"/>
<div id="form">
<input type"text" id="skriva" placeholder="Skriv din vara här!"/>
<input type="image" id="knapp" src="img/pluss.png" alt="Submit"/>
</div>
</div>
<div id="kol2">
<ul id="listaavvara"></ul>
</div>
</body>
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
</html>
Cookies slow down you web application, so if you to store data into the client browser you might want to use localStorage or sessionStorage. So if you want:
a lot of storage space
on the client
that persists beyond a page refresh
and isn’t transmitted to the server
Create a value:
localStorage.setItem("bar", foo);
Get the value:
var foo = localStorage["bar"];
Remove values:
localStorage.clear();
If you want to create a list, for instance, you can store a JSON value into the localStorage like:
localStorage.setItem("list", "[{"name":"Adriano"},{"name":"Vic"},{"name":"Test"}]");
Then you retrieve it and assemble in your page with JS.
This link is PERFECT: http://diveintohtml5.info/storage.html
By the way: It doesn't have expiration date like cookies =)

auto redirect to mobile site creating issues

I am using this to redirect to a mobile version of a webpage (it is not in a sub domain)
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "http://www.site.com/mobile/";
}
//-->
</script>
<script language="javascript">
<!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) {
location.replace("http://www.site.com/mobile/");
}
//-->
</script>
But when I access from a mobile I get an error that server is not found?
Here is the header of the mobile version
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="apple-touch-icon" sizes="114x114" href="images/icontwo.png">
<link rel="apple-touch-startup-image" href="images/startup.png" />
What could be causing this?, If I enter directly it seems to work...
Just to be safe I would use window.location.href because semantically the document object is referring to the DOM document or the HTML elements on the page. Also, some browsers only use window.location.href
Also, you seem to be using two redirects:
document.location = "http://www.site.com/mobile/";
AND
location.replace("http://www.site.com/mobile/");
which may cause issues. location.replace actually destroys the back button capability too which may cause some weird effects not to mention agitated users.
Also, make sure you're not coming onto the site with https://

PhoneGap not able to pass a querystring

I have an index.html and edit.html and trying to do the following, but by clicking the second and third link, the emulator showed me an error saying: Application Error, A network error occurred (file://android_asset/www/edit.html?id=2) and (file://android_asset/www/edit.html?id=3)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body id="stage" class="theme">
<h1>Welcome to XXX!</h1>
1
2
3
</body>
</html>
my edit.html is just a html header and body.
Any idea why?
Yes, this is a bug in Android not PhoneGap. Go star this Google issue to add your voice:
http://code.google.com/p/android/issues/detail?id=17535
In other news we believe we will have a work around in the 1.9.0 release which will be out at the end of the month.

Categories