Question

我正在开发一个房地产网站。我的网站上有很多广告，我需要创建一个最喜欢的广告。或者＆＃39;保存＆＃39;每个帖子上的按钮，用于将选定帖子保存在特定页面中供用户稍后阅读。

我想使用Cookie或本地存储来保留用户在该计算机上的收藏，这样用户就可以将项目添加到收藏夹中并在返回时再次查看。无需帐户。

感谢我的一位朋友，我写了一些代码，但它无法正常工作 - 我的意思是它没有显示任何结果。

非常感谢能帮助的任何人！

这是我目前的代码：

＆＃13;

function createCookie(name, value, days) {
    var expires = '',
    date = new Date();
    if (days) {
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = '; expires=' + date.toGMTString();
    }
    document.cookie = name + '=' + value + expires + '; path=/';
  }
  /*
  * Read cookie by name.
  * In your case the return value will be a json array with list of pages saved.
  */
  function readCookie(name) {
    var nameEQ = name + '=',
    allCookies = document.cookie.split(';'),
    i,
    cookie;
    for (i = 0; i < allCookies.length; i += 1) {
      cookie = allCookies[i];
      while (cookie.charAt(0) === ' ') {
        cookie = cookie.substring(1, cookie.length);
      }
      if (cookie.indexOf(nameEQ) === 0) {
        return cookie.substring(nameEQ.length, cookie.length);
      }
    }
    return null;
  }
  /*
  * Erase cookie with name.
  * You can also erase/delete the cookie with name.
  */
  function eraseCookie(name) {
    createCookie(name, '', -1);
  }
  $(function(){
var faves = new Array();
    var url = window.location.href; // current page url
    $(document.body).on('click','#addTofav',function(e){
      e.preventDefault();
      var pageTitle = $(document).find("title").text();
      var fav = {'title':pageTitle,'url':url};
      faves.push(fav);
      var stringified = JSON.stringify(faves);
      createCookie('favespages', stringified);
      location.reload();
    });
    $(document.body).on('click','.remove',function(){
      var id = $(this).data('id');
      faves.splice(id,1);
      var stringified = JSON.stringify(faves);
      createCookie('favespages', stringified);
      location.reload();
    });

     var myfaves = JSON.parse(readCookie('favespages'));
     faves = myfaves;
    $.each(myfaves,function(index,value){
      var element = '<li class="'+index+'"><h4>'+value.title+'</h4> <a href="'+value.url+'">Open page</a>  '+
      '<a href="javascript:void(0);" class="remove" data-id="'+index+'">Remove me</a>';
      $('#appendfavs').append(element);
    });
  });

＆＃13;

 <a href="javascript:void(0);" id="addTofav">Add me to fav</a>

  <ul id="appendfavs">

  </ul>

＆＃13;

Answer 1

我建议您更喜欢通过本地存储存储收藏夹，如果没有本地存储空间，则可以回退到cookie。

所以我实现了一个简短的例子，说明如何根据你的例子使用本地存储。

＆＃13;

			var chance;
			var favorites;
			var storage;

			$(document).ready(function() {
			  chance = new Chance(); // Just for random hash generation
			  if (window.Storage != undefined) {
			    storage = window.localStorage;
			    if (storage.favorites == undefined) {
			      favorites = [];
			    } else {
			      favorites = JSON.parse(storage.favorites);
			    }
			    updateList();

			    $('#fav').click(function() {
			      addFavorite(window.location);
			      updateList();
			    });

			    $('#list').on('click', 'li a', function() {
			      deleteFavorite($(this).data('id'));
			      updateList();
			    });
			  } else {
			    // No support for local storage
			    // Fall back to cookies or session based storage
			  }
			});

			function addFavorite(url) {
			  favorites.push({
			    id: chance.hash({
			      length: 15
			    }),
			    url: url
			  });
			  storage.setItem('favorites', JSON.stringify(favorites));
			}

			function deleteFavorite(id) {
			  for (var i in favorites) {
			    if (favorites[i].id == id) {
			      favorites.splice(i, 1);
			    }
			  }
			  storage.setItem('favorites', JSON.stringify(favorites));
			}

			function updateList() {
			  $('#list').empty();
			  if (typeof favorites !== 'undefined' && favorites.length > 0) {
			    for (var i in favorites) {
			      $('#list').append('<li>' +
			        favorites[i].url.href +
			        '&nbsp;&nbsp;&nbsp;&nbsp;' +
			        '<a class="delete" href="#" data-id="' + favorites[i].id + '">delete</a>' +
			        '</li>');
			    }
			  } else {
			    $('#list').append('<li>Nothing stored!</li>');
			  }
			}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.3/chance.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="fav" href="#">Add</a>

<ul id="list">
</ul>

＆＃13;

编辑：添加了JsFiddle链接：https://jsfiddle.net/Wachiwi/r2r3097q/13/

将项目添加到收藏夹，并在返回网站时再次查看它们

1 个答案: