将项目添加到收藏夹并将其保存在 Cookie 中

Posted 2023-05-07

【中文标题】将项目添加到收藏夹并将其保存在 Cookie 中

【英文标题】：Add item to favorites and save it in a Cookie

【发布时间】：2019-02-06 21:22:02

【问题描述】：

我有这个项目：

<li><a style="display: none">Movie</a><div id="movie-item" class="filterDiv thriller science-fiction action horror war 2018"></div></li>

还有一个按钮，可让您将该项目保存在收藏夹中：

<button onclick="document.getElementById('movie-item').item.classList.add('favorites');">Mark as favorite</button>

这很完美，因为当我点击“收藏夹”部分时，该项目会正确显示！ 但问题是：我想创建一个 Cookie 来保存该项目被标记为收藏。

示例：https://codepen.io/anon/pen/GzOmNe#anon-login

有人可以帮助我吗？谢谢

【问题讨论】：

我推荐使用 localStorage。您可以将选择保存为字符串，然后在以后将该保存的项目加载回页面中。 w3schools.com/jsref/prop_win_localstorage.asp

如果它是一个项目列表，那么您可以使用 JSON stringify 之类的东西将信息转换为字符串，然后使用 JSON parse 命令从字符串返回。 w3schools.com/js/js_json_stringify.asp

【参考方案1】：

我不建议使用 cookie。您应该改用 localStorage。

function saveFav () 

  document.getElementById('movie-item').classList.add('favorites');
  
  // Save
  localStorage.setItem('favorites', 'movie');
  // Get
  var fav = localStorage.getItem('favorites');
  console.log(fav);

<li><a style="display: none">Movie</a><div id="movie-item" class="filterDiv thriller science-fiction action horror war 2018"></div></li>

<button onclick="saveFav()">Mark as favorite</button>

【讨论】：

它对我不起作用，检查这支笔更好地理解：codepen.io/anon/pen/GzOmNe#anon-login

打开控制台看看...点击“将宝马标记为收藏”按钮后，保存的数据将存储在“fav”变量中。你可以通过调用localStorage.getItem('favorites')来获取标记的项目，然后做你想做的事......

【参考方案2】：

你可以通过这一行创建cookie

document.cookie = "cookieName=John Doe; expires=Thu, 2013 年 12 月 18 日 12:00:00 UTC; path=/";