Using getCookie, setCookie, and deleteCookie for memory allocation and management.

Overview

The getCookie, setCookie, and deleteCookie APIs allow you to store data gathered in your app for subsequent application use. This can be useful if you would like an app to remember a user’s usage patterns, clicks, views, or searches. In this guide, we will walk you through how to utilize cookies in a login simulation. In this example we will save a password, autofill passwords, update passwords, and delete a password from the application’s memory.

Prerequisites

  1. Umajin App Creator downloaded and installed.
  2. Any text editor.
  3. Completed tutorials for getProperty/setProperty, and registerAction.

Pro Tip: using Visual Studio Code as your editor will allow you to integrate debugging.

Instructions

Step 1) Create a new blank app in the Umajin App Creator to use as a testing platform for our multi device connection.

Step 2) Create a new JavaScript document and name it something that relates to your desired action. For our example, we will be naming the file Cookies.js because our goal is to demonstrate the use of three properties involving cookies that prompt the application to remember things such as passwords. Make sure that you save this file in the scripts folder under the Umajin Resources Folder.

File → Open Resources Folder → scripts.

NOTE: In order for this component to be available for use, simply reload the page.

Step 3) Set up your Umajin Platform for testing. We will have three pages in our app: a login page, a homepage, and an options page as displayed below.

  1. Create a login page. Ours looks like this:

    The login page header features a Text Component, a blue Rectangle Component, and a refresh Button Component which clears the page. There are two Text Entry Components with corresponding labels. The auto-fill Button Component corresponds to our fillPassword function which will be written in the following steps.The remember me checkbox is simply an Image Component which changes when clicked, to the same box with a green check in it. If you would like to use these images, they are attached below. The Action called is also displayed.
    The ‘Login’ Button Component calls our manageCookies function, which we will create next. The ‘Clear’ Button Component as well as the Refresh Button Component correspond to the Reset Page Action found in the Basic tab.

    The ‘Other Options’ Button Component brings us to the ‘Other Options’ page which corresponds to the Show Page Action in the Navigation tab.
  2. Create a Home Page for the user which will appear once the user is logged in.
    Ours looks like this:

    The ‘Logout’ Button Component brings the user back to an empty ‘Login’ page using both Navigate Back, and Reset Page Actions.
  3. Create an ‘Other Options’ page. This page allows the user to reset their password.
    Ours looks like this:

    The ‘Reset’ Button corresponds to our changePassword function, which is written later on. The other option is to delete your information from the system by removing the appropriate cookies. This function will also be written later on in the tutorial. There is also a ‘Back’ (arrow) Button to return to the login page in case the user changes their mind. This corresponds to the Navigate Back action. To set it up:Click the button → Action → On Press → Navigation → Navigate Back.

Step 4) We will write the function manageCookies. This function will be called when a user logs into the system. We will begin by registering our Action. This step is explained in detail in our registerAction tutorial. The parameters we will be using are the checkbox image as well as the two text entries containing the user’s username and password.

By getting the login information, we can determine when and when not to create new cookies. If the user checks the “remember me”  box, we will want to ensure that there is a cookie with the correct keys and values available for use. The new functions used in this function are hasCookie and setCookie. hasCookie checks if a persistent cookie has been set for a key that is taken in as a parameter. The return value for this is a boolean (true or false). setCookie sets the string stored as a key to the value. The key is the first parameter, the value is the second, and both are strings.

Map this to your ‘Login’ Button for future testing. Click the button → Actions → On Press → Custom → Cookie Manager

Step 5) Now we will want to create our fillPassword method, so that our login page can be completely functional. Like before, we will begin by registering our Action. You will notice that this function takes in the same parameters as above, since it is on the same page, but it will use these parameters differently.

If the user has saved their information on a previous login, there will be a cookie stored that holds their password. If this is the case, our text entry for the password can be filled automatically without user input. Similarly, the information will automatically be saved, and the remember me box will be checked. This function fills the text entry with the correct password, and alters the checkBox image to be checked. If the user tries to auto-fill their password without having previously saved their information, a popup box will appear telling them so.

Map this to your ‘AutoFill’ Button for testing. Click the button → Actions → On Press → Custom → Autofill Password

Step 6) We will now move on to the ‘Other Options’ page. The first option displayed allows the user to change their password. Once again, we will begin by registering our Action. This function takes in three parameters, the username from our login page, the old password entered in our first text entry on the options page, and the new password entered in our second text entry on the options page.

This is a rather simple function which updates the password value corresponding to the username key so long as the user is verified. It does introduce us to a new built in, getCookie. getCookie takes in the key, which is the username in this case, and returns the corresponding value, which is our password.

Make sure that the Button is mapped to the Action.
Click the button → Action → On Press → Custom → Change Password

Step 7) Now we will register our final custom Action, which will allow us to delete saved information from our app. This is particularly appealing for user experience, as the user will not feel as though their personal information is at risk of being used for unwarranted purposes.

As expected, we will begin by registering our Action.

The function itself introduces our final built in cookie function: deleteCookie. deleteCookie takes in the key, our username, as a parameter and it deletes the corresponding value. This means that future calls to hasCookie will be false until setCookie is called again.

Make sure that this Action is mapped to your ‘Delete’ Button.

Click the button → Action → On Press → Custom → Delete Saved Info

Step 8) Make sure that all of your Actions are mapped to the corresponding Buttons. You can now test our your login feature.