如何在 html cordova android 应用程序中创建“添加到收藏夹”功能？答案

【问题标题】：How to create 'add to favourite' feature in a html cordova android app?如何在 html cordova android 应用程序中创建“添加到收藏夹”功能？
【发布时间】：2018-07-10 05:33:43
【问题描述】：

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

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

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

请帮我完成这个，

提前致谢。

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您的尝试Minimal, Complete, and Verifiable example，并注明输入和预期输出。
“入门”问题与 SO 无关。
好吧，我在努力工作
有什么代码可以开始吗？如果人们有一些需要改进的源代码，他们可以更轻松地为您提供帮助。

标签： javascript html cordova phonegap-build

【解决方案1】：

因为这是一个“相当广泛”的问题，所以很难找到答案，但我建议制作一个数组，将最喜欢的歌曲存储到其中，然后当你打开 favorites.html 页面时，它获取数组，并将信息写入页面。

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

很抱歉，我不能提供太多帮助，但这是一个非常广泛的问题。

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

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

var favorites = [
  ["ExampleSong", "exampleSong.html"],
  ["LorddirtCoolSong", "LorddirtCoolSong.html"],
  ["StackOverflowIsAwesome", "StackOverflowIsAwesome.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：不是打印出数组中的两个数组，而是打印出数组中数组中的第一个内容，并添加一个指向数组中数组中的第二个内容的链接。已经糊涂了？通读一遍就明白了。

【讨论】：

抱歉，我在制作示例时玩得太开心了，我没有看到我在这个 xD 上工作了多久
您应该很容易做到这一点并对其进行自定义。
嗨，尽管 SO 中不允许出现入门问题，但感谢您帮助我。

【解决方案2】：

您好，我找到了使用 another SO question. 的解决方案

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

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

<!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 当按下按钮时，第二首歌曲链接将附加到本地存储

<!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>

【讨论】：