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

Question

我正在尝试为本地存储设置 6 个项目的限制，并取回这些项目。因此，例如，如果用户在 ID 为#gsc-i-id2 的输入框中输入数据并单击 .gsc-search-button-v2，则数据将存储在 localstorage 中，一切正常，但我想将其限制为最近的 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>

Answer 1

我明白了这个问题。如果你只想打印最近的 5 个地址，那么你可以这样尝试：

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

Answer 2

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

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

将项目添加到数组后检查数据数组的长度
如果数组长度超过6，则删除数组的第一项
将数组数据保存到localstorage

我提供了上述过程的片段。

   // 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;
    }

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

How to set an item limit on localstorage items Javascript HTML5

javascript

html

storage

local