在页面上加载来自HTML5 webstorage表的字段的javascript检查值

Question

当我的页面加载时，我创建一个包含字段的数据库，并在所有字段中成功加载数据。

在我的webstorage数据库中，它们是一列favourite，其类型为整数。当我的数据库在所有字段中填充数据时，favourite字段是具有0值的字段。

在此之后，我在页面中只显示一个按钮，代码为：

<img id="fav_image" onclick="addFav()" src="icons/star_fav_empty_icon.png" />

单击此图像时，它会将数据库中favourite字段中的值从0更改为1。

正如您在 abc表中 ID 3 favourite值 1 那样

更改图像值后，其功能也会改变...

......我这样做：

function addFav()
   {
    var pageId = a;     
        db.transaction(function(tx) {
          tx.executeSql(updateFav,[1,pageId], showEmpty , onError);
        });
    document.getElementById('fav_image').src="icons/star_fav_icon_fill.png";
    document.getElementById('fav_image').setAttribute( "onClick", "javascript: 
    removeFav();" );
    }

function removeFav()
   {
    var pageId = a;      
        db.transaction(function(tx) {
          tx.executeSql(updateFav,[0,pageId], showEmpty , onError);
        });
    document.getElementById('fav_image').src="icons/star_fav_empty_icon.png";
    document.getElementById('fav_image').setAttribute( "onClick", "javascript: addFav();"      
    );
    }

据我所知，这里的一切都很好。

我需要在加载页面时检查favourite值，并根据onClick值显示图片和favourite函数：

• 如果值为0，则使用addFav()函数
显示空星图像
• 如果值为1，则使用RemoveFav()函数
显示填充的星形图像

我使用此函数从数据库中获取favourite值：

function checkfav()
{
    var cID = a;
    var b;
    var getFavBool = 0;
    //fav.innerHTML = '';
    db.transaction(function(tx) {
          tx.executeSql(selectfavStatement, [cID], function(tx, result) {
            dataset = result.rows.item(0);
             getFavBool = dataset['favourite'];                            
              b = parseInt(getFavBool,10);
              if(b==1)
              {
              fav.innerHTML = b;
              return b;
              }
              else
              {
                fav.innerHTML = b;
                return b;
              }

          });
        });
}

我希望你能理解我想说的话......

Answer 1

我只添加了代码为的checkfav()函数：

function checkfav()
{
    //this is a ID to which i want to get the result.
    var cID = a;    
   db.transaction(function(tx) {
   tx.executeSql("selectfavStatement", [cID], function (tx, result) {
   var len = result.rows.length, i;
   dataset = result.rows;
   for (var i = 0, item = null; i < len; i++){
    item = dataset.item(i); 
        var favID = item['favourite'];

        //now this line is only to show result on HTML page. (optional)
        document.getElementById('fav').innerHTML = item['favourite']; 
        if(favID==1)
        {
           document.getElementById('fav_image').src="icons/star_fav_icon_fill.png";
           document.getElementById('fav_image').setAttribute( "onClick", "javascript: addFav();"          );    
        }
        else if(favID==0)
        {
            document.getElementById('fav_image').src="icons/star_fav_empty_icon.png";
            document.getElementById('fav_image').setAttribute( "onClick", "javascript: removeFav();" );
        }
   }
 });
});

}