最多保存 5 次搜索到 LocalHost

Question

我需要能够将最多 5 个搜索保存到侧边栏。当用户单击搜索时，它将重新执行保存的搜索。现在我正在使用 LocalStorage 来保存这些。目前我可以将最新的搜索保存为从 javascript 对象转换的字符串。很感谢任何形式的帮助！这是代码：

var searchObject = {};

$('.search-button').click(function () { 
  var business = $('#business-name-button').val();
  var industry = $('#industry-button').val();
  var job = $('#job-title-button').val();
  var revenue = $('#annual-revenue-button').val();
  var employeeNumber = $('#number-of-employees-button').val();
  var companyYears = $('#company-years-button').val();
  var locationAll = $('#location-all-button').val();
  var locationSingle = $('#location-single-button').val();
  var locationHeadquarter = $('#location-headquarter-button').val();
  var locationBranch = $('#location-branch-button').val();
  var minorityNone = $('#minority-none-button').val();
  var minorityOnly = $('#minority-only-button').val();
  var womenNone = $('#women-none-button').val();
  var womenOnly = $('#women-only-button').val();
  searchObject = {
    business: [business],
    industry: [industry],
    job: [job],
    revenue: [revenue],
    employeeNumber: [employeeNumber],
    companyYears: [companyYears],
    locationAll: [locationAll],
    locationSingle: [locationSingle],
    locationHeadquarter: [locationHeadquarter],
    locationBranch: [locationBranch],
    minorityNone: [minorityNone],
    minorityOnly: [minorityOnly],
    womenNone: [womenNone], 
    womenOnly: [womenOnly]
  };
  var searchHistory = '';
  if (business != '') {
    //   searchObject.business == $('#business-name-button').val();
    searchHistory += "Business Name: " + '<span>' + searchObject.business + "</span> &ensp;&mdash;&ensp;";
  };
  if (industry != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Industry: " + '<span>' + searchObject.industry + "</span> &ensp;&mdash;&ensp;";
  };
  if (job != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Job: " + '<span>' + searchObject.job + "</span> &ensp;&mdash;&ensp;";
  };
  if (revenue != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Anuual Revenue: " + '<span>' + searchObject.revenue + "</span> &ensp;&mdash;&ensp;";
  };
  if (employeeNumber != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "# Of Employees: " + '<span>' + searchObject.employeeNumber + "</span> &ensp;&mdash;&ensp;";
  };
  if (companyYears != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Years in  Business: " + '<span>' + searchObject.companyYears + "</span> &ensp;&mdash;&ensp;";
  };
  if (locationAll != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "All Locations: " + '<span>' + searchObject.locationAll + "</span> &ensp;&mdash;&ensp;";
  }; if (locationSingle != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Single Locations: " + '<span>' + searchObject.locationSingle + "</span> &ensp;&mdash;&ensp;";
  };
  if (locationHeadquarter != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Headquarter Locations: " + '<span>' + searchObject.locationHeadquarter + "</span> &ensp;&mdash;&ensp;";
  };
  if (locationBranch != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Branch Locations: " + '<span>' + searchObject.locationBranch + "</span> &ensp;&mdash;&ensp;";
  };
  if (minorityNone != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Omit Minorities: " + '<span>' + searchObject.minorityNone + "</span> &ensp;&mdash;&ensp;";
  };
  if (minorityOnly != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Only Minorities: " + '<span>' + searchObject.minorityOnly + "</span> &ensp;&mdash;&ensp;";
  };
  if (womenNone != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Omit Women: " + '<span>' + searchObject.womenNone + "</span> &ensp;&mdash;&ensp;";
  };
  if (womenOnly != '') {
    //   searchObject.business == $('#industry-button').val();
    searchHistory += "Only Women: " + '<span>' + searchObject.womenOnly + "</span> &ensp;&mdash;&ensp;";
  };
  $('.middle-content').show('fast');
  $('.user-instruct').hide();
  $('.saveSearch').prepend(
    "<h5>" + "Search" + "</h5>" +
    "<p>" + searchHistory.slice(0, -19)  + "</p>");
  var saveSearchDisplay = $('.saveSearch').html();
  localStorage.setItem('saveSearch', JSON.stringify( searchObject ));
  localStorage.setItem('saveSearchDisplay', saveSearchDisplay);
  return false;
});

if (localStorage.getItem('saveSearchDisplay')) {
  $('.saveSearch').html(localStorage.getItem('saveSearchDisplay'));
}

var restoredSession = JSON.parse(localStorage.getItem('saveSearch'));

/*if(localStorage.getItem('saveSearch')) {
            $('.saveSearch').html(localStorage.getItem('saveSearch'));
        };*/

$('#clearsave').click(function () {
  window.localStorage.clear();
  location.reload();
  return false;
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success search-button" type="button">Search</button>
<div class="section-right-content">
  <h4>Previous Searches</h4>
  <ul class="saveSearch"></ul>
</div>

Answer 1

这里运行会报错，但是可以粘贴到控制台中。

function createCircularQ(maxLength, arr) {
    const q = arr ? arr.splice(0, maxLength) : [];
    q.enqueue = enqueue.bind(null, q, maxLength);
    q.dequeue = q.shift;
    return q;
}

function enqueue(target, maxLength, o) {
   if(target.length === maxLength) {
     Array.prototype.pop.call(target);
   }
   return Array.prototype.unshift.call(target, o);
}

var searches = createCircularQ(5, JSON.parse(localStorage.getItem('searches')));
function search(str) {
    searches.enqueue(str);
    saveSearches();
    // perform search...
}
function saveSearches() {
    localStorage.setItem('searches', JSON.stringify(searches));
}

search('foo');
search('bar');
search('bam');
search('bat');
search('baz');
search('bop');
console.log(JSON.stringify(searches));
searches = null;
searches = createCircularQ(5, JSON.parse(localStorage.getItem('searches')));
console.log(JSON.stringify(searches));