文章/答案/技术大牛

发布

社区首页 >问答首页 >如何让收藏夹按钮将卡片添加到名为favorites.html的独立页面中

问如何让收藏夹按钮将卡片添加到名为favorites.html的独立页面中
EN

Stack Overflow用户

提问于 2022-11-02 19:58:47

回答 1查看 35关注 0票数 0

<div class="row">
<div class="col s12 m6">
  <div class="card">
    <div class="card-image">
      <img src="images/sample-1.jpg">
      <span class="card-title">Card Title</span>
      <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
    </div>
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
    </div>
  </div>
</div>

I have this code where I want to have the button add this card to a separate page called favorites.html. When the user clicks the add button it will also add the cards to the favorites.html page. So the user will have the main index.html page that displays these cards and then they can navigate to the favorites.html page to view the collection of favorites.  How would I go about doing this? I tried to link the add button to the "favorites.html" page but it did not add the card to it.

materialize

javascript

java

html

local-storage

回答 1

Stack Overflow用户

发布于 2022-11-02 20:31:04

您需要将喜爱的卡片存储在某个地方，理想情况下，我会说使用数据库，但是如果您的项目还没有数据库，最简单的方法是使用本地存储：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

您肯定需要在站点中添加一些javascript。

我将在这里给大家提供一些链接，还有一个例子：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#value

示例

function onAddButtonClick() {
  // This function will get excecuted whne you click the Add button
  localStorage.setItem('favouriteCard', 'MockText');
}

function onFavouriteViewLoad() {
  // You can get this function excecuted when you load the favourite.html page
  // to get what you want to show.
  return localStorage.getItem('favouriteCard');
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head prefix="og: http://ogp.me/ns#">
    <meta charset="utf-8" />
    <title>Example</title>
    <base href="/" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>

<body>
  <div class="row">
  <div class="col s12 m6">
    <div class="card">
      <div class="card-image">
        <img src="images/sample-1.jpg">
        <span class="card-title">Card Title</span>
        <button onClick="onAddButtonClick()" class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></button>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
    </div>
  </div>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74295018

复制

相似问题

问如何让收藏夹按钮将卡片添加到名为favorites.html的独立页面中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让收藏夹按钮将卡片添加到名为favorites.html的独立页面中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让收藏夹按钮将卡片添加到名为favorites.html的独立页面中
EN