Messing with Anchors and LocalStorage for Options page

Messing with Anchors and LocalStorage for Options page

I'm trying to put together a chrome extension. The options page is really messy so far. Can somebody help me figure out what's going on?

The first time I load it, the links toggle like they're supposed to. But when I reload it, it fails to highlight the stuff localStorage was supposed to have remembered, and the anchors don't seem to be working. The problem might be with localStorage, which, I guess isn't jQuery... But I need help, and whoever is helping me needs to be able to read this stuff, so I figured this was the place to ask.

Do note that this only needs to run in Webkit. Yay for not worrying about IE6!

  1. <html>
  2. <head><title>Concerto for Chrome Options</title></head>

  4. <script type="text/javascript"
  5. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
  6. </script>

  8. <style type="text/css">
  9. .feed {
  10. text-decoration: none;
  11. color: #DD0000;
  12. }
  13. .on {
  14. color: #00BB00;
  15. }
  17. #status{
  18. display:none;
  19. }
  20. </style>

  22. <script type="text/javascript">

  24. jQuery(document).ready(prepare_page);

  26. function prepare_page(){
  27. restore_options();
  28. jQuery(".feed").click(toggleFeed);
  29. }

  31. function toggleFeed(e) {
  32. e.preventDefault();
  33. $(this).toggleClass("on");
  34. }

  36. // Saves options to localStorage.
  37. function save_options() {
  38. var feeds = [];
  39. jQuery(".on").each(function() { feeds.push($(this).attr("id")); });
  40. localStorage.feeds = feeds;
  42. // Update status to let user know options were saved.
  43. $("#status").show();
  44. setTimeout(hideStatus, 800);
  45. function hideStatus() { $("#status").hide("fast"); }
  46. }

  48. // Restores select box state to saved value from localStorage.
  49. function restore_options() {
  50. var feeds = localStorage.feeds;
  51. if(!feeds) { return; }
  52. var count = 0;
  53. while (count < feeds.length) {
  54. jQuery("#"+feeds[count]).addClass("on");
  55. count = count+1;
  56. }
  57. }

  59. </script>

  61. <body>

  63. <p>Desired Feeds: <br/>
  64. <a href="" class="feed" id="feed1">Feed 1</a><br/>
  65. <a href="" class="feed" id="feed2">Feed 2</a><br/>
  66. <a href="" class="feed" id="feed3">Feed 3</a><br/>
  67. <a href="" class="feed" id="feed4">Feed 4</a><br/>
  68. <br/></p>
  69. <button onclick="save_options()">Save</button>
  70. <p id="status">Options Saved!</p>
  71. </body>
  72. </html>