如何设置本地存储项目的项目限制 Javascript HTML5答案

【问题标题】：How to set an item limit on localstorage items Javascript HTML5如何设置本地存储项目的项目限制 Javascript HTML5
【发布时间】：2021-05-26 01:23:51
【问题描述】：

我正在尝试为本地存储设置 6 个项目的限制，并检索这些项目。因此，例如，如果用户在 ID 为 #gsc-i-id2 的输入框中键入数据并单击 .gsc-search-button-v2，则数据将存储在本地存储中，这一切正常，但我想将此限制为最近的 6 个输入，在我尝试使用 .shift 的代码中，但我对 localstorage 和 js 很陌生，我不确定我在这里做错了什么。它确实只显示了 6 个项目，但并没有把项目弄乱。任何帮助将不胜感激。

(function() {

    var propertiesList = document.getElementById('list');
    var myProperties;
    var obj;
    if (window.localStorage.getItem('Address')) {
      displayStorage();
    }
  
    // function to display localStorage contents on page load
    function displayStorage() {
      var data = "";
      myProperties = JSON.parse(localStorage.getItem('Address'));
  
      // if localStorage array is not empty
      if (myProperties.length !== 0) {
  
        for (var i = 0; i < myProperties.length; i++) {
  
          var li = document.createElement('li');
          data += myProperties[i].address + " ";
          li.innerHTML = data;
          data = '';
          propertiesList.appendChild(li);
  
        }
      }
    }
    $("body").on('click', '.gsc-search-button-v2', function(index) {
      var address = document.getElementById('gsc-i-id2');
      obj = {};
      obj.address = address.value;
      myProperties = JSON.parse(localStorage.getItem('Address')) || [];
      myProperties.push(obj);
      localStorage.setItem('Address', JSON.stringify(myProperties));
        addToPropertiesList();
    })
  
    function addToPropertiesList(e) {

      var len = myProperties.length - 1;
      var li = document.createElement('li');
      var data = '';
      data += myProperties[len].address + " ";
      li.innerHTML = data;
      if(len > 5){
        myProperties.shift(li);
      } else{
      propertiesList.appendChild(li);
      }
    }
  
  }());

<input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id2" dir="ltr" spellcheck="false" style="width: 100%; padding: 0px; border: none; margin: -0.0625em 0px 0px; height: 1.25em; background: rgb(255, 255, 255); outline: none;">

<td class="gsc-search-button"><button class="gsc-search-button gsc-search-button-v2"><svg width="13" height="13" viewBox="0 0 13 13"><title>search</title><path d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z"></path></svg></button></td>

<ul id="list"></ul>

【问题讨论】：

请将您的 HTML 分享为 minimal reproducible example。谢谢。
我建议你应该将 DOM 操作的代码和与 localstorage 交互的代码分开。这将使查看您问题的人更容易阅读代码！
谢谢，我添加了最小的 html，但我不确定如何将它分开以进行 DOM 操作抱歉
查看我的 github 存储库，了解将本地存储方法组织到每个函数中的示例。 github.com/geniuskouta/local_storage_js/blob/master/index.html 这将帮助您将本地存储操作与 DOM 操作分开。

标签： javascript html storage local

【解决方案1】：

我了解到您只想在本地存储中保存 6 个最近的项目

由于您不能直接在 localstorage 上设置规则，我建议您在这种情况下如何将数据保存在 localstorage 上的解决方案：

向数组中添加项后检查数据数组的长度
如果数组长度超过6，则删除数组的第一项
将数组数据保存到本地存储

我为上述过程提供了 sn-p。

   // add code here for adding an item to the array

   if(exceedsPropertiesLengthLimit(myProperties)) {
       myProperties.shift();
   }

   // add code here for saving the array data on localstorage
    
   function exceedsPropertiesLengthLimit(properties) {
        let limitLength = 6;
        let exceedsLimit = false;

        if(properties.length > limitLength) {
            exceedsLimit = true;
        }
        return exceedsLimit;
    }

【讨论】：

感谢您在这方面的帮助，但我似乎无法确定将您的代码放在我的哪个位置以使其正常工作？
我相信它应该插入到myProperties.push(obj) 之后的行中，如果这是您向数组添加项目的位置。祝你好运！
非常感谢 Kouta，这正是我想要的 :)

【解决方案2】：

我理解问题所在。如果您只想打印最新的 5 个地址，那么您可以尝试这样的操作：

if(len>5){
for(var j = len; j>= len - 5; j++){
.... // Write here what you want to do with the last five values
     }
}

【讨论】：