Having trouble with the cookie functionality in Ionic Angular JS?

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ngCookies'])

.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {

if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);

}
         if (window.StatusBar) {
                StatusBar.styleLightContent();
         }

});
})

.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider

  .state('HomePage', {
             url: '/HomePage/:id',
             templateUrl: 'templates/HomePage.html',
             controller: 'HomePageCtrl'
         })
         .state('login', {
             url: '/login',
             templateUrl: 'templates/Login.html',
             controller: 'LoginCtrl'
         });
  $urlRouterProvider.otherwise('/login');

});

controllers.js

angular.module('starter.controllers', [])

.controller('LoginCtrl', function ($scope, LoginService, $ionicPopup, $state, $location, $http, $cookieStore) {

$cookieStore.put('mycookie', 'cookie value');
var favoriteCookie = $cookieStore.get('mycookie');

   var alertPopup = $ionicPopup.alert({
   title: 'favoriteCookie title',
   template: favoriteCookie // This does not work on phone.

});})

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">


    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/ng-cordova-master/demo/www/lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="lib/ionic/js/cookies.js"></script>

</head>
<body ng-app="starter">

    <ion-nav-view></ion-nav-view>

</body>
</html>

Question:

If i use $cookieStore it works on browser without any problem.

However when i publish project to phone $cookieStore is not working. I mean When i try to use $cookieStore in android phone.

$cookieStore displays below error on $ionicPopup.alert.

undefined

How can i use cookie on android by using ionic?

Any assistance on this matter would be highly appreciated.

Thank you.

Answer №1

For better compatibility on Android, consider switching from $cookieStore to using the default localStorage. It functions perfectly! :)

$cookieStore.set() -> window.localStorage.setItem()
$cookieStore.get() -> window.localStorage.getItem()
$cookieStore.remove() -> window.localStorage.removeItem()

Answer №2

I appreciate it if you could give a thumbs up to this answer instead since I was not properly logged in when I posted the other one >_< oops!

To resolve the issue of $cookieStore not working well on Android, you can simply switch to using the default localStorage. It functions perfectly fine! :)

$cookieStore.set() -> window.localStorage.setItem()
$cookieStore.get() -> window.localStorage.getItem()
$cookieStore.remove() -> window.localStorage.removeItem()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the regex pattern for the date format to dd-M-yy in jQuery Validation Engine

Snippet for validating date format using JavaScript: "date": { // Custom function to check if date is valid with leap year consideration "func": function (field) { //var pattern = ne ...

Controlling opacity with jQuery animate() function using a click event

I have a specific requirement for an animation. When the button is clicked, I need the element to transition from 0 opacity to full 1 opacity within 300 milliseconds. The issue I am facing is that when the button is clicked, the animation does not work a ...

Utilizing Material-UI Select for creating a number range dynamically

Seeking a solution to create a select element using material-ui that offers a range of numbers from 0 to 20,000,000 in increments of 25,000. Currently, I have accomplished this using a for loop. for (let price = 0; price <= 20000000; price = price + 250 ...

Is it feasible to assess JavaScript expressions during compilation using Webpack?

I'm currently in the process of setting up webpack for a new project. This project is quite extensive and available in multiple languages. I am aiming to have each entry point in my project be represented by separate files in each language. The catch ...

The Signature Pad loses its focus

My HTML code is using JavaScript with Bootstrap and the Signature Pad. The issue I am facing is related to the Bootstrap Collapse feature. When I set the first panel as default, the Signature Pad does not allow me to sign. However, if I set the third panel ...

Is there a way to make changes to a pre-uploaded PDF document?

I'm looking to include a footer in a PDF file that is currently stored on the server. For instance, I have uploaded a file to uploads/aaa.pdf and now I need to insert a footer into the same file located at uploads/aaa.pdf Does anyone know how I can ...

Discover how to generate nested dynamic routes in NextJS by linking to MongoDB data using the getStaticProps and getStaticPaths functions

Currently, I am facing a challenge with implementing dynamic paths in NextJS and I'm struggling to find a solution. Let me provide some context for better understanding. I am working on developing an ecommerce application using NextJS, and the folder ...

Troubleshooting the Hover Effect of Buttons in Next.js when Using Tailwind CSS for Dynamic Color Changes

Encountering a problem with button hover functionality in a Next.js component using Tailwind CSS. The objective is to alter the button's background color dynamically on hover based on a color value stored in the component's state. This code func ...

Is there a way to use JavaScript to modify the position of a div element

Can we adjust the div position using CSS (absolute or relative) with JavaScript? Here's an example code snippet: <div id="podpis" style="margin-top: 2rem;"> <div class="invoice-signature"> <span><?=$xml->sanitiz ...

Guide on transferring Vue form input data to Adonis controller through an http request

I have a Vue component that prompts the user to enter their email address. I've utilized v-model for data binding. <template> <input v-model="email" type="text" placeholder="Email" /> <button class="tiny">Send</button> ...

Generate a new Div dynamically, positioned higher than the rest

Once a second, this script will utilize AJAX to open a new page and display the contents in a dynamically created div on this page. However, the issue is that the new divs are stacking under each other, and I would prefer them to be added at the top instea ...

The method .setArray has been deprecated in THREE.BufferAttribute. Instead, please use BufferGeometry .setAttribute for unindexed BufferGeometry operations

Seeking assistance with updating the webgl-wireframes library code to the latest version of threejs. The current function is generating the following errors: Uncaught TypeError: THREE.Geometry is not a constructor THREE.BufferAttribute: .setArray has ...

displaying and activating element using jQuery

I'm currently working on setting up a notification system for my website but seem to be encountering some issues that I can't quite pinpoint. Essentially, I have a link that triggers a JavaScript function upon being clicked. This function is mean ...

Create a custom key in SJCL that has an expiration time set for automatic deletion

My current project involves encrypting and decrypting data on the client-side using the SJCL library. However, I have a specific requirement that the encryption key must expire after a certain scheduled time. So my question is this: Can a key with an e ...

Chartjs-node in conjunction with prebuilt canvas is persistently generating 'Cairo not detected' errors

Currently, I am utilizing chartjs-node for creating charts. On my local (Windows) machine, the node.js code works flawlessly, likely due to having windows-build-tools with the cairo package installed. However, when attempting to compile on my remote (Linu ...

How can a row in AG-Grid be updated without causing a refresh?

I am working on adding a custom radio button feature for users to select a row. Currently, I have the following code: const Cell = (cellProps) => { const { data, node, api } = cellProps const selectedRow = () => { let { isChecked } = data ...

How do I start using Google Analytics: application.js, ga.js, or a beginner’s guide?

Hello there! I was wondering if anyone could provide a comprehensive guide or step-by-step tutorial on setting up Google Analytics with some examples. The information I found so far only covers signing up and obtaining a tracking code, but it doesn't ...

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

svg-to-json.js | The mysterious disappearing act of my file

After completing the installation process for svg-to-json.js as detailed in my previous post, I ran the command: node svg-to-json.js filename.txt The expectation was that a .json file would be generated, but I couldn't locate it. Is it supposed to ...

Collecting all Material-UI components into a single document

Currently, I am engaged in a Meteor project that utilizes Material UI and ReactJS. I wish to streamline the process by creating a single file that imports all necessary Material UI components for my project. This way, instead of adding individual exports ...