WebOS Boston Developing for WebOS

Working with Cookies

Written By: Joseph Crawford Print This Post

Over the last few days I have been working with the Cookie as a method for storage on the Palm Pre. I looked in the WebOS Book and there was a nice cookie class that could be used. This will not be a complete walk-through like the last tutorials have been. This will show you how to create a cookie object and how to interact with it so that you can store your application preferences. You can store any type of data you would like in a cookie. It does not seem to be like the Depot where you can *only* store objects.

At the time of writing I have found an issue with using cookies so be sure to read the second to last paragraph.
Below is the class that was taken from the WebOS Book which we will be using for our Cookie object.

// Globals
WBPrefs = {};
WBPrefs.someOtherValue = false;
WBPrefs.versionString = "0.0.1";

function WBCookie()
{

}

WBCookie.prototype.initialize = function()
{
    this.cookie = new Mojo.Model.Cookie('cookie_name');
    this.oldPrefs = this.cookie.get();
    if(this.oldPrefs)
    {
        // If current version, just update globals & prefs
        if(this.oldPrefs.versionString == WBPrefs.versionString)
        {
            WBPrefs.someOtherValue = this.oldPrefs.someOtherValue;
            WBPrefs.versionString = this.oldPrefs.versionString;
        }
        else
        {
            // migrate old preferences here on updates of FreshBooks App.
        }
    }

    this.storeCookie();
};

WBCookie.prototype.storeCookie = function()
{
    this.cookie.put(
        {
            someOtherValue: WBPrefs.someOtherValue,
            versionString: WBPrefs.versionString
        }
    );
};

This code is pretty straight forward. It creates a WBCookie object which actually interacts with the Mojo.Model.Cookie object. You can see the initialize command does a few things. First it creates a new Mojo.Model.Cookie object with the name of your cookie and stores it in a property named this.cookie. It creates another property called this.oldPrefs which will store the values that are pulled out of the cookie. It is called oldPrefs because they are the values that were last used for the application. It then makes sure that oldPrefs is a valid object. Once it knows we have a valid result we can then compare the versionString stored in the cookie with our application cookie versionString. This allows us to properly migrate preferences if we ever change the structure of the cookie. It then calls the this.storeCookie method which saves the current application Preferences into the cookie. When you are using this method the cookie is updated everytime you update one of the WBPrefs values. I am not entirely sure what causes it to update with every preference change it must be some magic done by the framework.

Now that we have the cookie class we will need to create a scene assistant which will make use of the cookie. We will very simply create a view with a text field and a button. You will be able to change the value in the textbox and tap the button to update the cookie value. We will start with the following code.

function FirstuseAssistant() {

}

FirstAssistant.prototype.setup = function() {
    this.cookie = new WBCookie();
    this.cookie.initialize();

    WBPrefs.someOtherValue = "Joseph Crawford";
}

FirstAssistant.prototype.activate = function(event) {

}

FirstAssistant.prototype.deactivate = function(event) {
        this.cookie.storeCookie();
}

FirstAssistant.prototype.cleanup = function(event) {

}

In the assistant code above you can see that we simply update the value of WBPrefs.someOtherValue which updates the cookie. Next time we run the application the value will have been retained for our use again. This comes in very handy for detecting which scene you should show. For instance if your application will require a user to login you can check the cookie for the username / password and if they do not exist then show the sign-in scene otherwise show your main scene.

I am not sure what is happening whether palm has a bug in their code or if it is just my setup however when testing this all out I noticed that my cookies are retained on the emulator. I have deleted the application from the emulator by holding the option key while tapping and I have also used the Komodo Add-On. However my cookie seems to be retained across application installs and it should not be. According to Palm's Documentation the cookies and databases related to an application should be removed from the device when the application is removed. I personally have not tried it on the device but others have confirmed they have had their cookies be retained on the device as well. Until this issue is fixed I really do not see a real use for cookies. The data should not be retained across application installs. Have you ever had the issue of a cookie being retained like this? The only way I have found to test to make sure it was all working is to add a this.cookie.remove() before we set the cookie. This will make the app remove the cookie whenever it is launched. Obviously that is not production worthy code because the application settings would be removed on every launch. It did however show me that my cookie was being retained and that my other code was working properly.

The code above is not a full example it just illustrates how to use the cookie model in Mojo. You will have to do some of your own coding using these methods in order to use it properly.

About Joseph Crawford

A web developer with over 10 years of experience who has been working on high traffic e-commerce and social networking sites. Specializing in website development using PHP it only took time before he ventured into the WebOS arena. You can visit his website to find out more about him.