Cookies for IntelXDK Cache

janed_o_ · ‎01-05-2016

How do I make it work the below code with IntelXDK Cache. This code work perfectly with chrome, IE & mozila browser. I want IntelXDK to do the same. Remember user choice of Country & City and then redirect them accordingly. User can change their choice ANYTIME.

js/demo.js

   var mytime;
function getPramJs(param) {
	var query = window.location.search.substring(1);
	var parms = query.split('&');
	for (var i=0; i<parms.length; i++) {
	var pos = parms [ i ].indexOf('=');
	if (pos > 0) {
	var key = parms [ i ].substring(0,pos).toLowerCase();
	var val = parms [ i ].substring(pos+1);
	if(key == param.toLowerCase())
		return val;
	}
	}
return null;
}
 $(document).ready(function () { 
	var edit ="";
	edit =  getPramJs("edit");
	var chkCounty = getCookie("country");
	var chkCity = getCookie("city");
	if(chkCounty != null){
		$("#country").val(chkCounty);
	}
	if(chkCity != null){
		$("#city").val(chkCity);

	}
	if((chkCounty != null)&&(chkCity != null)){
		$('#firt').css({'display':'none'});
		$('#change').css({'display':'block'});
		if(chkCity=="city 3"){
			$('#content').css({'display':'block'});
		}

		mytime = setInterval(function(){ redirect() }, 1000);
		if(edit=="1"){
			change();
		}
	}else{
		$('#firt').css({'display':'block'});
		$('#change').css({'display':'none'});
	}
 });
   function myStopmytime() {
    clearInterval(mytime);
  }
// Set cookie
function setCookie(name, value, exdays, path, domain, secure) {
	var expires=new Date();
expires.setDate(expires.getDate() + exdays);
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
 
// Read cookie
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}
 
//delete cookie
function eraseCookie (name,path,domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
function change(){
		$('#firt').css({'display':'block'});
		$('#change').css({'display':'none'});
		 myStopmytime();
}

function showdirec(){
		$('#firt').css({'display':'none'});
		$('#change').css({'display':'block'});
}
function saveLocation(){
	var country =  $( "#country option:selected" ).text() +"";
	if(country != "select your country"){
		eraseCookie("country");
		setCookie("country",country,365);
	}else{
		
	}
	if(city != "select your city"){
		var city =  $( "#city option:selected" ).text() +"";
		eraseCookie("city");
		setCookie("city",city,365);
	}else{
		
	}
	redirect();
	//showdirec();
}

function redirect(){
	var lol = "http://pmckw.com";
	var chkCity = getCookie("city");
	if(chkCity =="city 1"){
		lol= "http://pmckw.com";
	}	
	if(chkCity =="city 2"){
		lol= "https://www.google.com/";
	}
	if(chkCity=="city 3"){
		lol= "kuwait.html";

		}
		if(chkCity =="city 4"){
		lol= "kuwait.html";
	}
			redirectTo(lol);
}

function redirectTo(location)
{
     window.location.href =location;
}

demo.html

<!DOCTYPE html>
<html>
<!--
  * Please see the included README.md file for license terms and conditions.
  -->
<head>
    <title>MumineenApp Downloads</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

<!--
  * The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.
  * Note that Windows device viewports work better when initialized using the @viewport CSS rule.
  * For a quick overview of "meta viewport" and @viewport, see this article:
  *   http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag
  * To see how it works, try your app on a real device with and without a "meta viewport" tag.
  * Additional useful references include:
  *   http://www.quirksmode.org/mobile/viewports.html
  *   http://www.quirksmode.org/mobile/metaviewport/devices.html
  *   https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
-->

    <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->

    <style>
    /* following three (cascaded) are equivalent to above three meta viewport statements */
    /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
    /* see http://dev.w3.org/csswg/css-device-adapt/ */
        @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
        /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
    </style>

    <link rel="stylesheet" href="css/app.css">

    <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
    <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->
    <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->

    <!-- Recommended location for your JavaScript libraries -->
    <!-- These library references (below) are just examples to give you the general idea... -->
    <!-- <script src="lib/mc/hammer.js"></script> -->
    <!-- <script src="lib/ft/fastclick.js"></script> -->

<!--
  * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"
  * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?
  * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.
  * You can safely ignore the error or comment out this line if you will not be developing a Cordova app.
-->
    <script src="cordova.js" id="xdkJScordova_"></script>

<script src="js/demo.js"></script>

    
    <script src="js/app.js"></script>           <!-- for your event code, see README and file comments for details -->
    <script src="js/init-app.js"></script>      <!-- for your init code, see README and file comments for details -->
    <script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see file for details -->
    <script src="xhr.js"></script>
     <script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
     <script type="text/javascript">
        var onDeviceReady=function(){                             // called when Cordova is ready
           if( window.Cordova && navigator.splashscreen ) {     // Cordova API detected
                navigator.splashscreen.hide() ;                 // hide splash screen
            }
        } ;
        document.addEventListener("deviceready", onDeviceReady, false) ;
    </script>
	
	
    	<!-- css -->
	<link href="css/base.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
	<!-- favicon -->
	<!-- ... -->

	<!-- ie -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
    
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    
    <style>
.lbl-xs{
	min-width:100px;
	max-width:100px;
	display:inline-block;
	background-color: #fff;
	font-weight: bold;
}
.fiedline{
	margin:1px;
}
.btn{
    margin-left: 125px;
    margin-top: 15px;
    font-weight: bold;
}
.bold{
    font-weight: bold;
}
.slt{
	width: 150px;
}
.hiden{
	display:none;
}
</style>
    
    
</head>


<body class="avoid-fout">
    
     <script>
        function openExternal(elem) {
            window.open(elem.href, "_system");
            return false; // Prevent execution of the default onClick handler 
        }
    </script>
    
	<div class="avoid-fout-indicator avoid-fout-indicator-fixed">
		<div class="progress-circular progress-circular-alt progress-circular-center">
			<div class="progress-circular-wrapper">
				<div class="progress-circular-inner">
					<div class="progress-circular-left">
						<div class="progress-circular-spinner"></div>
					</div>
					<div class="progress-circular-gap"></div>
					<div class="progress-circular-right">
						<div class="progress-circular-spinner"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<header class="header">
		<ul class="nav nav-list pull-left">
			<li>
				<a data-toggle="menu" href="#menu">
					<span class="icon icon-lg">menu</span>
				</a>
			</li>
		</ul>
		<a class="header-logo" href="index.html">MumineenApp</a>
		<ul class="nav nav-list pull-right">
			<li>
				<a data-toggle="menu" href="#profile">
					<span class="access-hide">John Smith</span>
					<span class="avatar"><img alt="alt text for John Smith avatar" src="images/users/avatar-001.png"></span>
				</a>
			</li>
		</ul>
	</header>
	
	<div class="content">
		<div class="content-heading">
			<div class="container">
				<h1 class="heading">About App</h1>
			</div>
		</div>
		<div class="container">
            <section class="content-inner">
<div id ="firt">
<div class="fiedline">
	<span  class="lbl-xs">Country: </span>
	<select id="country" style="" class="bold slt">
	  <option value="0">select your country</option>
	  <option value="1">Country 1</option>
	  <option value="2">Country 2</option>
   </select>
</div>
<div class="fiedline">
	<span class="lbl-xs">City: </span>
	<select id="city" style="" class="bold slt">
	  <option value="0">select your city</option>
	  <option value="1">city 1</option>
	  <option value="2">city 2</option>
	  <option value="3">city 3</option>
	  <option value="4">city 4</option>
   </select>
</div>
<div class="fiedline">
	<button type="button" id="Go" style='' class='btn' onclick="saveLocation();">Set Location</button>
</div>
</div>
			</section>
		</div>
	</div>



	<footer class="footer">
		
	</footer>
	
	   
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="js/base.min.js"></script>
</body>
    
</html>
</script>
</html>

kuwait.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

</head>

<body >

JAVASCRIPT HERE
	
	<a href="demo.html?edit=1">Change location</a>

</body>

</html

PLEASE PLEASE HELP

Thank You

Hamilton_Tenório_da_ · ‎01-05-2016

I am using this code to store:

function funName (value) {

    try {
        if(typeof(window.localStorage) !== 'undefined') {
            window.localStorage.setItem("variable", value);
        }
        else
            {
....
            }
    }
    catch(err){
....
    }
}

and to retrieve data:

function name {
  try {
        if(typeof(window.localStorage) !== 'undefined') {
            value = window.localStorage.getItem("name");
        } else {
...
            }
    }
    catch(err){
...
    }
}

janed_o_ · ‎01-06-2016

@Hamilton please help me to encode my above my code as i have no idea about above javascript code as its done by other guy.

how do i encode my code with intelxdk? sorry i am a beginner to all this.

janed_o_ · ‎01-06-2016

No body to help me :(

Hamilton_Tenório_da_ · ‎01-06-2016

@janed you need to change all the fucntions "getCookie" and "setCookie" according my suggestion above. Use normal javascript commands to do it.

janed_o_ · ‎01-06-2016

@Hamilton Dear i have no idea about all this. like i told u i have made this done by other guy.

Could you please HELP ME?

Hamilton_Tenório_da_ · ‎01-07-2016

@janed: sorry, it is dificult to change without analise all the ideia. As far I see, ou must change 3 functions: setCookie, getCookie and eraseCookie.

Maybe them can be reduced, because inside an app the control is simplier.

For example, setCookie could be only:

function setCookie(name, value) {
try {
        if(typeof(window.localStorage) !== 'undefined') {
            window.localStorage.setItem(name, value);
        }
    }
}

All the controls of domain, path, etc, maybe can be removed. As I said befere, it is necessary to understand better the idea.