I am new to Angularjs and quite not sure where to start from,i need to display data(coming from a json) under each date in datepicker.
I have my datepicker calendar ready.
<!doctype html>
<html ng-app="720kb">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://720kb.github.io/csshelper/assets/ext/src/helper.css">
<link rel="stylesheet" type="text/css" href="src/css/angular-datepicker.css">
<title>Angularjs Datepicker</title>
</head>
<body>
<div class="separator50"></div>
<div class="col6 offset-left2">
<div class="col3">
<div class="datepicker"
date-format="MMMM d, y"
button-prev='<i class="fa fa-arrow-circle-left"></i>'
button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input ng-model="date2" type="text" class="angular-datepicker-input"/>
</div>
Date 2 is: {{date2}}
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/angular-datepicker.js"></script>
<script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>
This is an example of getting JSON Data in Angular Js , can u give us some more information about what the structure of the Json ?
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
Related
I have a collapsible that I mocked up on jsfiddle at https://jsfiddle.net/1gsqxo26/
It works fine there.
Same exact code on google apps script, nadda. What do I need to change to make this work properly there?
test4.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<base target="_top">
</head>
<body>
<div data-role="collapsible-set" id="set">
<div data-role="collapsible" data-collapsed="false" data-mini="true" class="stuff">
<h3>Stuff</h3>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<?!= include('test4JS'); ?>
</body>
</html>
test4JS:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$('#submit').on('click', collapse);
function collapse(sender) {
$("#set").children(":first").collapsible( "collapse" );
//$(".stuff").collapsible("collapse");
//$("#set").children(":first").trigger( "collapse" );
//$(".stuff").trigger("collapse");
//none of these work
}
</script>
Im trying to learn react js by following this tutortial in youtube. My program is just a very simple html code with some react.js. I follow every single step he made but I did not get the same result as he did. Can you please tell me what is wrong in my code and why is it not working?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Haime Computer Shop</title>
<link rel="stylesheet" type="text/css" href="index_css.css">
<script src="src/js/react.min.js"></script>
<script src="src/js/react-dom.min.js"></script>
<script src="src/js/browser.min.js"></script>
</head>
<body>
<div class="homeLinks_dcls">
<p> Home</p>
<p> About Us</p>
<p> Services</p>
<p> Contact us</p>
</div>
<div id="container"></div>
<script type="text/babel">
var myReactObj = React.createClass({
render: function(){
return (<h2>This is a component!</h2>);
}
});
ReactDOM.render(<myReactObj/>, document.getElementById('container'));
</script>
</body>
</html>
I can only see the "Home, About Us, Services, Contact Us" text. What I can not see is the "This is a component!" text inside the myReactObject.
Thanks in advance for the help...
The problem you are facing is because you are trying to deal with JSX syntax (javascript with html tags embedded) directly through your browser, but you need the Babel to transpile your code.
At this point, you have 2 options:
Add babel to your HTML:
JSX
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>With Babel</title>
<link rel="stylesheet" type="text/css" href="index_css.css">
<script src="src/js/react.min.js"></script>
<script src="src/js/react-dom.min.js"></script>
<script src="src/js/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
<div class="homeLinks_dcls">
<p> Home</p>
<p> About Us</p>
<p> Services</p>
<p> Contact us</p>
</div>
<div id="container"></div>
<script type="text/babel">
var myReactObj = React.createClass({
render: function(){
return (<h2>This is a component!</h2>);
}
});
ReactDOM.render(
React.createElement(myReactObj),
document.getElementById('container')
);
</script>
</body>
</html>
Change your code to use javascript only, as the sample below:
javascript
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Without Babel</title>
<link rel="stylesheet" type="text/css" href="index_css.css">
<script src="src/js/react.min.js"></script>
<script src="src/js/react-dom.min.js"></script>
<script src="src/js/browser.min.js"></script>
</head>
<body>
<div class="homeLinks_dcls">
<p> Home</p>
<p> About Us</p>
<p> Services</p>
<p> Contact us</p>
</div>
<div id="container"></div>
<script type="text/javascript">
var myReactObj = React.createClass({
render: function(){
return React.createElement('h2', { }, 'This is a component!');
}
});
ReactDOM.render(
React.createElement(myReactObj),
document.getElementById('container')
);
</script>
</body>
</html>
I have build for popup on a page (Inspirations page in this case). This page is a directive included in main 'product_chat.html' which is connected to 'product_chat.js'. All these files are initiated from index.html
index.html
<!DOCTYPE html>
<html ng-app="myApp" lang="en" class="no-js" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head data-ng-app="app">
<meta charset="utf-8">
<meta name="verify-admitad" content="ed499e6bac"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="wot-verification" content="591de88d2ae5d58564c7"/>
<title ng-bind="title">"Online shopping site | Women fashion | Personal styling - Selekt"</title>
<link rel="icon" href="/pics/favicon.png">
<meta name="description" content="{{meta_desc}}">
<meta itemprop="description" content="Application wide description for Schema.org (Google+ uses this)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700,200,300' rel='stylesheet' type='text/css'>
<link rel="canonical" href="{{canonical_url}}">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/dist/angular-typewrite.css"/>
<link rel="stylesheet" href="css/isteven-multi-select.css"/>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/select-css.css">
<link rel="stylesheet" href="css/style_find.css">
<link rel="stylesheet" href="css/select-css-compact.css">
<link rel="stylesheet" href="css/searchSelect.css">
<link rel="stylesheet" href="css/style_load.css">
<link rel="stylesheet" href="css/popup.css">
<!--<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<link rel="stylesheet" href="bower_components/ngModal/ng-model.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92766347-1', 'auto');
ga('send', 'pageview');
</script>
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
.main_banner {
background-image: url('pics/banner.png');
background-repeat: no-repeat;
min-height: 100vh;
display: block;
overflow-x: hidden;
background-size: 1600px 900px;
}
</style>
<base href="/"/>
</head>
<body class="main_banner">
<div class="">
<div ng-view>
</div>
</div>
<!--In production use:-->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="node_modules/socket.io/socket.io.js"></script>
<!--<script src="bower_components/socket.io-client/socket.io.js"></script>-->
<!--<script src="bower_components/angular-socket-io/socket.js"></script>-->
<script src="js/angular-searchAndSelect.js"></script>
<script src="product-app-services/app-services.js"></script>
<script src="publish/wedding-dresses-for-women/product-chat.js"></script>
<script src="publish/home/product-chat.js"></script>
<script src="publish/search/product-chat.js"></script>
<script src="publish/find/product-chat.js"></script>
<script src="app-services/app.module.js"></script>
<script src="app.js"></script>
<script src="bower_components/angular-typewrite/dist/angular-typewrite.js"></script>
<!--//custom dialog-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootbox/bootbox.js"></script>
<script src="bower_components/ngBootbox/dist/ngBootbox.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
product_chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Private Chat Application with Node.js, Socket.IO and AngularJS</title>
<meta name="generator" content="Bootply">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/style_find.css">
</head>
<body cz-shortcut-listen="true" style="background: white">
<div id="main_page" ng-show="show_page" scroll >
<nav_header></nav_header>
<div>
<div>
<inspirations ng-if="inspirations_dir"; ng-init="myDialog()"></inspirations>
</div>
</div>
</div>
</body>
</html>
in the above code, I am calling popup function in 'inspirations' tag
Here is my product_chat.js file (Only relevant part of the code is attached)
var app = angular.module("WeddingDressesForWomen", ['ui.bootstrap']);
app.controller("WeddingDressesForWomen", ["$http","$rootScope", '$scope', '$window', 'socket', "$location", "$anchorScroll", "$timeout", '$routeParams', 'title', 'userService', '$filter', '$document', '$localStorage','$uibModal',
function ($http,$rootScope, $scope, $window, socket, $location, $anchorScroll, $timeout, $routeParams, title, userService, $filter, $document, $localStorage,$uibModal) {
$scope.myDialog = function () {
$uibModal.open({
templateUrl: 'template/popup.html',
backdrop: 'static',
windowClass: 'modal',
size: 'lg',
controller: function ($scope, $uibModalInstance) {
$scope.cancel = function () {
$uibModalInstance.dismiss();
};
}
});
};
}]);
popup.html template
<div class="modal-header">
<h3 class="modal-title">Note</h3>
</div>
<div class="modal-body">
Selekt will be functionally live with Women's Fashion by 10th May and Men's Fashion by 30th May. It is currently in Beta phase.
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" style="background-color:#337ab7; border-color:#2e6da4"
ng-click="cancel()">Okay</button>
</div>
I can't comment on this because of my reputation! But do you minify the javascript? I can see you've used implicit dependency injection for $uibModalInstance in the controller - you should be using the property annotation as well, when you declare the controllers dependencies for $uibModalInstance otherwise the code will be broken when the javascript is minified.
Also for the bootstrap library. You can log the service to the console.. i.e console.log($nameOfService)... Are you not able to download the bootstrap javascript and add it to the project?
I want to have a google map on my website, but the map does not show up if I first open index.html and navigate to map.html.
But if I directly open map.html or refresh the browser window while being on map.html the map shows up.
How can the map show up when navigating from index.html to map.html?
I'm using the standalone Pjax JavaScript module v0.1.4 stable (no jquery).
I added document.write("rendered at: "+ Date.now()) In my example code for better understanding.
index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is site 1</h4>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is the map site</h4>
<!-- map is not displayed currently -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(50.0, 10.0)
var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
style.css
#map-canvas {
width: 90%;
height: 500px;
}
example.js
document.addEventListener("DOMContentLoaded", function() {
var pjax = new Pjax({
selectors: [".dynamic"]
})
console.log("Pjax initialized.", pjax)
})
Assign the style explicitly to the map div the map work .. could be you have an error in the path for style.css
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is the map site</h4>
<div id="map-canvas" style="width:90%; height:500px;"></div>
</div>
</div>
<!-- map is not displayed currently -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(50.0, 10.0)
var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript" src='example.js'></script>
</body>
</html>
I create a example of LocalStorage. When I use Chrome web browser, It works fine. But when I test on iPhone Emulator, It doesn't. Please help.
Here is my code to set the local storage value:
function onclick(){
window.localStorage.setItem("data","Nguyen Minh Binh");
}
===========
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="js/index.js" type="text/javascript" ></script>
</head>
<body>
<a data-role="button" href="DemoWOrklightJQM/index.html" data-prefetch onclick="onclick()">Click me</a>
</body>
</html>
Here is the code where I tried to get the saved data:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DemoSimpleControls</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
<link rel="stylesheet" href="css/DemoSimpleControls.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#mysavedData").html("XYZ");
$("#mysavedData").html(window.localStorage.getItem("data"));
});
</script>
</head>
<body id="content" >
<div data-role="page" id="page">
<div data-role="header" >
<a data-rel="back" href="#" >Back</a>
<h1>My page</h1>
</div>
<div data-role="content" style="padding: 15px" data-theme="e">
<div id="mysavedData">My data</div>
Button
</div>
</div>
</body>
</html>
EDIT:
At Whizkid747's suggest, I change the script source as below but It still doesn't work.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DemoSimpleControls</title>
<meta name="
viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
<link rel="stylesheet" href="css/DemoSimpleControls.css">
<script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
< script type="text/javascript" charset="utf-8" src="../cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", deviceready, false);
}
function deviceready(){
$("#mysavedData").html("XYZ");
$("#mysavedData").html(window.localStorage.getItem("data"));
}
</script>
</head>
<body id="content" onLoad="onLoad();" >
<div data-role="page" id="page">
<div data-role="header" >
<a data-rel="back" href="#" >Back</a>
<h1>My page</h1>
</div>
<div data-role="content" style="padding: 15px" data-theme="e">
<div id="mysavedData">My data</div>
Button
</div>
</div>
</body>
</html>
EDIT2: Try to set localStorage at OnDeviceReady then get it next lines, but still doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script src="https://raw.github.com/phonegap/phonegap/2.5.0rc1/lib/android/cordova-2.5.0rc1.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
window.localStorage.setItem("key", "minhbinh");
var keyname = window.localStorage.key(i);
// keyname is now equal to "key"
var value = window.localStorage.getItem("key");
// value is now equal to "value"
window.localStorage.removeItem("key");
window.localStorage.clear();
// localStorage is now empty
$("p#p1").text(value);
}
</script>
</head>
<body>
<h1>Example</h1>
<p id="p1">localStorage</p>
</body>
</html>
Move your code in document.ready to onDeviceReady event of PhoneGap. onDeviceReady is when you need to start executing your custom code.
Edit: *Try the below code with cordova.js added locally and not from github*
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script src="cordova-2.5.0rc1.js"></script>
</head>
<body>
<h1>Example</h1>
<p id="p1">localStorage</p>
<script type="text/javascript">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
window.localStorage.setItem("key", "minhbinh");
var keyname = window.localStorage.key(i);
// keyname is now equal to "key"
var value = window.localStorage.getItem("key");
// value is now equal to "value"
//window.localStorage.removeItem("key");
//window.localStorage.clear();
// localStorage is now empty
$("p#p1").text(value);
}
</script>
</body>
</html>
There was a problem when running Cordova 2.1 (fixed in 2.2) on iOS 6: initializing the localstorage the first time the app is run does not work.
Please check this for a solution:
http://www.x-services.nl/cordova-localstorage-cleared-after-first-app-launch-ios6/369