重裝頁面圖片應選擇

Question

我要存檔的內容：

• 使用選定的類別切換圖像
• 重新加載頁面后，以前選擇的圖片應被記住。

我遇到的問題：myPhotos數組未采用每個“選定”項...而是使用“選定”類循環元素，但每次都添加相同的元素。

第二個問題是displayPhotos函數將需要更改為每次都顯示所有圖像。但是在刷新時保留選定的圖像。

請幫忙。

我創建了一個小提琴，以防下面的代碼不起作用。 https://jsfiddle.net/1mes2z6s/1/

 // Creates an empty array for selected photos to be added to myPhotos = []; // --------------------------------------------- // Callback function to get photos from flickr // --------------------------------------------- (function() { //changed the callback so that it is defined window.cb = function(data) { //user returned data displayPhotos(data); } var tags = "london"; var script = document.createElement('script'); script.src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=cb&tags=" + tags; document.head.appendChild(script); })(); // ------------------------------------ // Display photos // ------------------------------------ function displayPhotos(data) { var $images = $('#images'); // Check if localStorage key is empty (eg no photos have previously been selected) and go and get some if (localStorage.getItem("mySavedPhotos") === null) { // loop through photos in the JSON endpoint for (var i = 0; i < data.items.length; i++) { $('<img/>').attr('src', data.items[i].media.m).appendTo($images); } // localStorage key has items, so show them instead } else { // retrive the items in localStorage var len = JSON.parse(localStorage['mySavedPhotos']).length var item = JSON.parse(localStorage['mySavedPhotos']) // loop through photos in local storage for (var i = 0; i < len; i++) { $('<img/>').attr('src', item[i]).appendTo($images); } } } // ------------------------------------ // Add 'selected' class to photo, push it to the 'myPhotos' array, then add array to localStorage // ------------------------------------ function selectPhoto(photo) { // add 'selected' class to image photo.addClass('selected'); // push the 'src' of that image to the array myPhotos.push(photo.attr('src')); var mySavedPhotos = myPhotos; // JSON stingify the items in local storage so they can be accessed easily localStorage['mySavedPhotos'] = JSON.stringify(mySavedPhotos); // debug // console.log(JSON.parse(localStorage['mySavedPhotos'])); } // ------------------------------------ // JQUERY DOM LOADED // ------------------------------------ $(function() { // When user clicks on photo to select $('#images').on('click', 'img', function() { selectPhoto($(this)); }); // Clear the local storage items (for debug) $('#debugBtn').on('click', 'button', function() { localStorage.removeItem("mySavedPhotos"); console.log(localStorage); }); }); 

  div#images img { width: 100px; height: 100px; margin: 10px; border: 3px solid #fff; } div#images img.selected { border: 3px solid #f06; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- this is where the photos will be displayed --> <div id="images"></div> <!-- this is a button to clear localStorage items and is for debugging --> <div id="debugBtn"> <button>Remove LocalStorage Key</button> </div> 

Answer 1

如果我理解正確，我想你想要這樣的東西：

function displayPhotos(data) {
    var $images = $('#images');
    var savedPhotos = []; // default to empty array
    var localPhotos = localStorage.getItem("mySavedPhotos");

    if (localPhotos) {
        savedPhotos = JSON.parse(localPhotos);
    }

    // loop through photos in the JSON endpoint
    for (var i = 0; i < data.items.length; i++) {
        var src = data.items[i].media.m;
        var $img = $('<img/>').attr('src', src);
        // add selected class if it is in our storage array
        if ($.inArray(src, savedPhotos) !== -1) {
            $img.addClass('selected')
        }
        $img.appendTo($images);
    }   

}

演示

Answer 2

我想這就是您想要的，在這里查看此工作解決方案

的HTML

<!-- this is where the photos will be displayed -->
<div id="images"></div>

<!-- this is a button to clear localStorage items and is for debugging -->
<div id="debugBtn">
  <button>Remove LocalStorage Key</button>
</div>

jQuery的

// Creates an empty array for selected photos to be added to
myPhotos = [];
if (localStorage['mySavedPhotos'])
  myPhotos = JSON.parse(localStorage['mySavedPhotos']);

// ---------------------------------------------
// Callback function to get photos from flickr
// ---------------------------------------------
(function() {

  //changed the callback so that it is defined
  window.cb = function(data) {
    //user returned data 
    displayPhotos(data);
  }

  var tags = "london";
  var script = document.createElement('script');

  script.src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=cb&tags=" + tags;
  document.head.appendChild(script);


})();

// ------------------------------------
// Display photos
// ------------------------------------
function displayPhotos(data) {
  var $images = $('#images');

  // Check if localStorage key is empty (e.g. no photos have previously been selected) and go and get some
  if (localStorage.getItem("mySavedPhotos") === null) {

    // loop through photos in the JSON endpoint
    for (var i = 0; i < data.items.length; i++) {
      $('<img/>').attr('src', data.items[i].media.m).appendTo($images);
    }

    // localStorage key has items, so show them instead    
  } else {

    // retrive the items in localStorage
    var len = JSON.parse(localStorage['mySavedPhotos']).length
    var item = JSON.parse(localStorage['mySavedPhotos'])
    for (var i = 0; i < data.items.length; i++) {
      // loop through photos in local storage
      //console.log($.inArray(data.items[i].media.m, item));
      if ($.inArray(data.items[i].media.m, item) >= 0) {
        $('<img/>').attr('src', data.items[i].media.m).addClass('selected').appendTo($images);
      } else {
        $('<img/>').attr('src', data.items[i].media.m).appendTo($images);
      }
    }

    //console.log(JSON.parse(localStorage['mySavedPhotos']));
  }
}

// ------------------------------------
// Add 'selected' class to photo, push it to the 'myPhotos' array, then add array to localStorage
// ------------------------------------
function selectPhoto(photo) {

  if (photo.hasClass('selected')) {
    photo.removeClass('selected');
    myPhotos = jQuery.grep(myPhotos, function(value) {
      return value != photo.attr('src');
    });
    localStorage['mySavedPhotos'] = JSON.stringify(myPhotos);
  } else {
    // add 'selected' class to image
    photo.addClass('selected');

    // push the 'src' of that image to the array
    myPhotos.push(photo.attr('src'));

    var mySavedPhotos = myPhotos;

    // JSON stingify the items in local storage so they can be accessed easily
    localStorage['mySavedPhotos'] = JSON.stringify(mySavedPhotos);

    // debug
    // console.log(JSON.parse(localStorage['mySavedPhotos']));
  }
}

// ------------------------------------
// JQUERY DOM LOADED
// ------------------------------------
$(function() {

  // When user clicks on photo to select
  $('#images').on('click', 'img', function() {

    selectPhoto($(this));

  });

  // Clear the local storage items (for debug)
  $('#debugBtn').on('click', 'button', function() {
    localStorage.removeItem("mySavedPhotos");
    console.log(localStorage);
  });

});

您正在做的是myPhotos = []; 然后將其分配給localStorage ，這就是為什么每次刷新時都會使用新數據而舊數據會丟失的原因