Javascript, localStorage and a checkbox array

Page 1 of 1

2 Replies - 610 Views - Last Post: 11 December 2012 - 03:35 PM

#1 south73paw  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 84
  • Joined: 06-October 08

Javascript, localStorage and a checkbox array

Posted 11 December 2012 - 02:08 PM

Hi

After success creating an iBooks Author HTML5 widget that saves user input via text boxes, I thought I'd have a go at another.

What I want is to create a checklist widget that
(a) saves the user's ticked checkboxes in local storage
(B) redisplays the entire list of checkboxes, indicating which ones were previously checked AND which ones are not

I'm new to javascript, but ok in VB. My thinking was to
1. Create an array and manually populate it in javascript
2. save() function - loop through the array and save those checkboxes that have been ticked
3. load() function - loop through the array and display ticks in the checkboxes that had previously been checked

My code so far has css, javascript and html in the same file - checklist.html

<!DOCTYPE HTML>
 
 
<head>
 
 
<meta charset="utf-8" name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"/>
 
 
<title>Year 9 ICT Website Design</title>
 
 
<style>
          body{
                    font-family: Helvetica, Arial, Verdana, sans-serif;
                    padding: 3px;
                    margin: 3px;
          }
          ul{
                    list-style: none;
                    padding: 3px;
                    margin: 3px;
          }
          li{
                    clear: left;
                    font-size: 30px;
                    padding: 6px 6px 6px 20px;
                    margin: 6px;
          }
          li input{
                    float: left;
                    margin-right: 30px;
                    width: 50px;
                    height: 30px;
          }
          li:nth-child(even){
                    background-color: #eee;
          }
          h1{
                    font-size: 50px;
                    padding: 0.4em, 1em;
                    border-bottom: 2px solid #999;
                    background-color: #eee;
                    margin: 3px;
          }
</style>
 
 
<script>
          var checklistItems = new Array();
          checklistItems[0] = "chkBox1";
          checklistItems[1] = "chkBox2";
          checklistItems[2] = "chkBox3";
 
          function save() {
                    for (var i = 0; i < checklistItems.length; i++) {
                              if(checklistItems[i].checked) {
                                        localStorage.setItem("checkedItems", JSON.stringify(checklistItems[i]));
                              }
                    }
                   alert("Data saved!");
          }
 
          function load() {
                    for (var i = 0; i < checklistItems.length; i++) {
                              if(checklistItems[i].checked) {
                                        localStorage.getItem("checkedItems");
                              }
                    }
          }
 
</script>
 
 
 
 
</head>
 
 
 
 
<body onload="load()">
 
 
          <h1>Website Project Checklist</h1>
          <ul>
                    <li><input type="checkbox" name="chkBox1"/>Item One</li>
                    <li><input type="checkbox" name="chkBox2"/>Item Two</li>
                    <li><input type="checkbox" name="chkBox3"/>Item Three</li>
                    <p><input type="submit" name="btnSave" value="Save Checklist" onclick="save()"/></p>
          </ul>
</body>
 
 
</html>



I know things aren't right because it's not working. Data doesn't persist when the widget is reloaded after moving 2 pages away or reloading the app. I'm guessing it's both the save() and load() functions, but after much searching online, I'm not sure what to do next.

Can anyone point me in the right direction?

This post has been edited by south73paw: 11 December 2012 - 02:09 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript, localStorage and a checkbox array

#2 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,412
  • Joined: 18-April 07

Re: Javascript, localStorage and a checkbox array

Posted 11 December 2012 - 02:26 PM

You are right to suspect that both your save and load are problematic. But before we get to that, lets look at your checklistitems array. Right now you have defined the array as a list of strings. You need a list of checkbox objects. You need the objects because you attempt to call the property "checked" which is a property of a checkbox item, not a string. So you will need to revisit that.

Now your save (assuming you have an array of checkboxes now)...

function save() {
    for (var i = 0; i < checklistItems.length; i++) {
        if(checklistItems[i].checked) {
            // For each checked checkedbox, set the key "checkedItems" to a string
            // representation of each item. Problem is, you keep resetting this key.
            // Perhaps you want to try saving the entire array by using just checklistItems
            // (that is, no index)
            localStorage.setItem("checkedItems", JSON.stringify(checklistItems[i]));
        }
    }
    alert("Data saved!");
}


The problem in your code above is that for each item of the array you are overwriting the same key! Same for your load in that you are reading the same key for each iteration.

What you want to do is save them in different keys, or perhaps save the state of each checkbox in an array of "states" and then on the load, just load this array of states and rebuild the array of checkboxes again. You can of course also try stringify the entire array of checkboxes and get them back into an array of checkboxes on the load.

It is up to your design. You can save just the "checked" and rebuild the array of checkboxes (then going through and checking those that need to be checked) or try and save the entire checkbox list as a json string.

Hope you get what I am saying. :)

This post has been edited by Martyr2: 11 December 2012 - 02:30 PM

Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: Javascript, localStorage and a checkbox array

Posted 11 December 2012 - 03:35 PM

some notes of caution:
  • functions like document.getElementsByName() do not return an Array (though you can loop through it like one) but a NodeList* instance (or sometimes a HTMLCollection, that depends on the used browser version)
  • DOM Elements cannot be serialised by JSON.stringify() (circular references and such)




* - an Interface defined by the W3C DOM
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1