I am trying to set a limit of 6 items to localstorage and also retrieve the items back. So for example if a user types in data into an input box with id #gsc-i-id2 and clicks the .gsc-search-button-v2, the data gets stored in localstorage which all works fine but I want to limit this to the 6 most recent input's, in the code i've tried using .shift but i'm very new to localstorage and js and i'm not sure what i'm doing wrong here. It does display only 6 items but doesn't shit the items up. any help would be very much appreciated.
(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>I understood that you want to only save 6 recent items on localstorage
Since you can't directly set rules on localstorage, I suggest my solution as to how you should save the data on localstorage in this case:
I provide the snippet for the process above.
// 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;
}