javascript cookie中的LIFO

Question

试图用LIFO(最后一个先出)概念在cookie中保存最后五个搜索。当搜索六个查询时，它将替换最后一个查询。我们如何才能做到这一点。我试过这段代码，但它只保存了一个值。

    function setCookie(key, value) {  
       var expires = new Date();  
       expires.setTime(expires.getTime() + 31536000000); //1 year  
       document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();  
       } 

    function getCookie(key) {  
       var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');  
       return keyValue ? keyValue[2] : null;  
       }  

    function setCookieToBrowser(){
    var searchString=$("#auto").val();
    setCookie('lastSearch', searchString);  
    }

    function getCookiefromBrowser(){
    $('#auto').val(getCookie('lastSearch'));
    }
    getCookiefromBrowser();
    $('#frmmainSearch2').submit(function() {
     setCookieToBrowser()
      return true;
    });


 <form id="frmmainSearch2" action="#" method="post">
 <input type="text" id="auto">
 <input type="submit" value="save">

JsFiddle

Answer 1

其基本思想是将数组存储在cookie中，并在达到最大长度时转移该数组。

这是一步一步的过程：

1. 尝试从cookie中读取查询列表
2. 如果该值存在于cookie中，则执行JSON.parse获取数组。如果不存在，请使用空数组。
3. 提交表单时，请检查以前查询的数组的长度。如果它已经包含了五个查询，那么对数组执行shift()以删除第一个项
4. 将当前查询推送到数组末尾。
5. 使用数组上的JSON.stringify更新cookie。

请参阅更新后的代码在更新的JSfiddle中或以下内容：

function setCookieToBrowser(){
  var searchString=$("#auto").val();

  if(previousQueries.length === 5) previousQueries.shift();
  previousQueries.push(searchString);
  setCookie('lastSearch', JSON.stringify(previousQueries));  
}

function getCookieFromBrowser(){
  var cookieValue = getCookie('lastSearch');
  if(cookieValue !== null) {
    previousQueries = JSON.parse(cookieValue);
    console.log('previous queries', previousQueries)
    var datalist = document.querySelector('datalist');
    datalist.innerHTML = '';

    for(var i=previousQueries.length - 1; i>=0;i--) {
      var option = document.createElement('option');
      option.value = previousQueries[i];
      datalist.appendChild(option);
    }
    $('#auto').val(previousQueries[0]);
  }
}

还请注意更新的JSFiddle中的代码如何使用数据表进行自动完成。