如何在 html cordova android 应用程序中创建 'add to favourite' 功能？

Question

我正在使用 phonegap 创建歌本应用程序。在 index.html 中，我在 li 标签中有歌曲列表。当我点击一首特定歌曲时，它会在另一个本地 html 文件中打开该特定歌曲的歌词。

我要加一个'favourite button'。单击收藏夹按钮后，我希望将该特定歌曲添加到收藏夹列表中。当用户打开收藏页面时，它应该显示他们喜欢的歌曲列表，当他们在收藏页面中单击一首歌曲时，它应该打开该特定歌曲的歌词 html 页面。

我是 HTML 的中级用户和 JavaScript 的初学者。

请帮我完成这个，

提前致谢。

Answer 1

因为是一道'pretty broad'题，所以很难找到答案，不过我建议做一个数组，把喜欢的歌曲存进去，然后打开favorites.html页面，获取数组，将信息写入页面。

例如当在歌曲页面上单击收藏夹按钮时，它会写入：歌曲名称（exampleSong）、歌曲页面（exampleSong.html）以及您需要的其他随机详细信息，然后转到 favorites.html 应该有一个文档就绪函数，可以读取数组并写入页面。

抱歉，如果我帮不了那么多，但这是一个非常广泛的问题。

如果您需要帮助，这里是我创建的一些示例

（获取收藏夹数组，并打印出来）

var favorites = [
  ["ExampleSong", "exampleSong.html"],
  ["LorddirtCoolSong", "LorddirtCoolSong.html"],
  ["WhosebugIsAwesome", "WhosebugIsAwesome.html"]
];

var containerA = document.getElementById("favoritesA");
for (var i in favorites) 
{
   
   for (var j in favorites[i]) 
     {
      var newElement = document.createElement("p");
      newElement.innerHTML = favorites[i][j];
      containerA.appendChild(newElement);
     }
}

var containerB = document.getElementById("favoritesB");
for (var i in favorites) 
{
   var newElement = document.createElement("p");
      newElement.innerHTML = "<h4>Favorite Song " + i + "</h4>";
      containerB.appendChild(newElement);
   for (var j in favorites[i]) 
     {
      var newElement = document.createElement("p");
      newElement.innerHTML = favorites[i][j];
      containerB.appendChild(newElement);
     }
}

var containerC = document.getElementById("favoritesC");
for (var i in favorites) 
{
   var newElement = document.createElement("p");
      newElement.innerHTML = "<h4>Favorite Song " + i + "</h4>";
      containerC.appendChild(newElement);
   for (var j in favorites[i]) 
     {
     if(j == 1){
     }else{
      var newElement = document.createElement("p");
      newElement.innerHTML = "<a href='" + favorites[i][1] + "'>" + favorites[i][j] + "</a>";
      containerC.appendChild(newElement);
      }
     }
}

.favoriteSongs{
border: 2px solid black;
display: block;
}

<!--
EXAMPLE 1A: Print out the Favorites
-->
<hr>
<h2>Example 1A: Print favorites out</h2>
<div id='favoritesA' class='favorites'>
</div>
<hr>
<!--
EXAMPLE 1B: Now you know the order of the songs!
-->
<h2>Example 1B: Print favorites out with formatting</h2>
<div id='favoritesB' class='favorites'>
</div>
<hr>
<!--
EXAMPLE 1C: Link them
-->
<h2>Example 1C: Link to the page</h2>
<div id='favoritesC' class='favorites'>
</div>
<hr>

非常不言自明，它获取最喜欢的歌曲数组，其中包含名称和 url，获取容器 <div id='favorites'></div> 并将内容写入其中。

（哦，等等，我才注意到我花了这么长时间在这上面哈哈哈。）示例：

1A：我所做的只是搜索数组收藏夹，然后打印出数组中的每一项。简单。

1B：略有不同，和上一个一样，只是我在数组中的每个数组前加了一个<h4>标签。（是的，数组中的数组中的数组令人困惑）。

1C：不是打印出数组中的两个数组，而是打印出数组中数组中的第一个东西，并添加一个 link 指向数组中的第二个东西阵列。已经糊涂了吗？看完你就明白了。

Answer 2

您好，我使用

找到了解决方案

首先我们将创建一个本地存储并将歌曲详细信息存储在该本地存储密钥中。然后我们将使用 localStorage.getItem(key);

在 favorite.html 中检索该信息

以下是我的第一首歌曲的代码song1.html 当按下按钮时，歌曲 link 将被附加到本地存储

<!DOCTYPE html>
<html>
<body onload="mySong()">



<button onclick="mySongOne()">add to favorite</button>





<script>
function mySong() {

localStorage.setItem("favsong", "");
}


 function appendToStorage(name, data){
    var old = localStorage.getItem(name);
    if(old === null) old = "";
    localStorage.setItem(name, old + data);
}
function mySongOne() {
   appendToStorage("favsong", "<a href='https://www.song1.com'><h1>song1</h1></a>");
}


</script>

</body>
</html>

换一首歌 song2.html 当按下按钮时，第二首歌曲 link 将被附加到本地存储

<!DOCTYPE html>
<html>
<body>



<button onclick="mySongTwo()">add to favorite</button>



<script>
 function appendToStorage(name, data){
    var old = localStorage.getItem(name);
    if(old === null) old = "";
    localStorage.setItem(name, old + data);
}
function mySongTwo() {
   appendToStorage("favsong", "<a href='https://song2.com'><h1>song2</h1></a>");
}


</script>

</body>
</html>

和favorite.html 在页面加载时，它将显示本地存储的详细信息

<!DOCTYPE html>
<html>
<body onload="yourFunction()">

<div id="result"></div>



<script>
function yourFunction() {
  document.getElementById("result").innerHTML = localStorage.getItem("favsong");
}



</script>

</body>
</html>

如何在 html cordova android 应用程序中创建 'add to favourite' 功能？

How to create 'add to favourite' feature in a html cordova android app?

html

javascript

cordova

phonegap-build