Monday, November 16, 2009

Google Chrome extension options page: store Boolean in localStorage


Google Chrome allow users to customize the behavior of a extension through its options page. An options page can be an HTML page with some JavaScript functions. User's input on the options page can be stored into localStorage and retrieved each time the extension starts.

We may want to put some checkboxes on the options page, like this:

<html>
<head><title>Extension Options</title>
<script type="text/javascript">

// Saves options to localStorage.
function saveOptions() {
   localStorage["tstChkbox"] = document.getElementById("chkbx").checked;
}

// Restores value from localStorage.
function restoreOptions() {
   var value = localStorage["tstChkbox"];
   if (null != value)
      document.getElementById("chkbx").checked = value;
}

</script>
</head>

<body onload="restoreOptions()">

<form>
<input type="checkbox" id="chkbx" /> Check Box <br />
</form>

<button onclick="saveOptions()">Save</button>
</body>
</html>

But this piece of code doesn't work. If you step through it in the debugging tool, it looks perfect. But the checkbox is always checked every time the options page is loaded even if you uncheck it before save. Why?

When you uncheck the checkbox, it seems the following statement have saved the Boolean false to the localStorage. But it actually saves a "false" string.
   localStorage["tstChkbox"] = document.getElementById("chkbx").checked;

So when we retrieve it from the localStorage, we retrieve a "false" string. In JavaScript, any string -- including "false" -- will be converted to Boolean true when the type conversion is needed. So the following piece of code will always check the checkbox when the "false" string is retrieved from localStorage.
   var value = localStorage["tstChkbox"];
   if (null != value)
      document.getElementById("chkbx").checked = value;

This is not what we want. To fix it, we can do a little conversion for the value retrieved from localStorage:

function toBool(str)
{
   if ("false" === str)
      return false;
   else 
      return str;
}

Then we can set the value for checkbox like this:
   var value = localStorage["tstChkbox"];
   if (null != value)
      document.getElementById("chkbx").checked = toBool(value);

6 comments:

Anonymous said...

thanks for the tip. Unfortunately it produces the opposite problem, where the checkbox ends up always being unchecked instead of checked.

Anonymous said...

my apologies for the last comment. It does in fact work. Thanks again.

Anonymous said...

There is the "value" attribute on INPUT element. It would be much simpler with it...

Anonymous said...

Thanks for this. I thought I was going mad! Good tip :)

ian said...

Now if only I can set the radio buttons... Coming from C to javascript is ugly, I'm not fond of loosely type variables.

Anonymous said...

How would you use this with multiple checkboxes

 
Get This <