Напечатайте текст, нажмите его в массив и сохраните в localstorage

Question

В моем коде я печатаю слово и пытаюсь нажать его в свой массив.

Когда я нажимаю элемент, он сохраняет, но когда добавляется другой, последний добавленный элемент изменяется, и только последний введенный элемент отображается в массиве. Что не так с моим кодом?

Почему я не могу нажать несколько элементов в массив?

$(function() { 

    var arr = []; 

    $(".yourWordButton").click(function() { 
    var word = $.trim($(".yourWord").val()); 
    word = word.split(' ').join(''); 
    $(".yourWord").val(''); 

    localStorage.setItem('word', word); 

    return false; 
    }); 

    if (localStorage.getItem('word')) { 
    arr.push(localStorage.getItem('word')); 
    } 
    console.log(arr); 

}); 

JS BIN

После добавления, нажмите 'Запуск с Js' кнопку, чтобы увидеть, что находится в массиве.

Answer 1

Вы можете попробовать это :: $ (функция() {

var arr = []; 

    $(".yourWordButton").click(function() { 
    var word = $.trim($(".yourWord").val()); 
    word = word.split(' ').join(''); 
    $(".yourWord").val(''); 
    localStorage.setItem('word', word); 
    if (localStorage.getItem('word')) { 
      arr.push(localStorage.getItem('word')); 
    } 
    console.log(arr); 
    return false; 
    }); 
}); 

Answer 2

Вы заменяете массив на каждый щелчок localStorage.setItem('word', word); Попробуйте прочитать список слов на каждый клик в массив, так что вы имеете полный список слов, нажмите новое слово, а затем сохранить массив LocalStorage

(function($){$(function(){ 
 
    var localStorageMock = { 
 
    data: {}, 
 
    setItem: function(key, val){ 
 
     localStorageMock.data[key] = val; 
 
    }, 
 
    getItem: function(key){ 
 
     return localStorageMock.data[key]; 
 
    } 
 
    }; 
 
    
 
    $('#add-to-array').on('click', function(){ 
 
    var rawWords = localStorageMock.getItem('myWords'), 
 
     myWords = JSON.parse(typeof rawWords != 'undefined' ? rawWords : '[]'), 
 
     $newWord = $('#new-word'); 
 
    myWords.push($newWord.val()); 
 
    
 
    // save to localstorage 
 
    localStorageMock.setItem('myWords', JSON.stringify(myWords)); 
 
    
 
    // clear the input and render the list 
 
    $newWord.val('').focus(); 
 
    renderList(); 
 
    }) 
 
    
 
    var renderList = function(){ 
 
    var $list = $('#list'), 
 
     rawWords = localStorageMock.getItem('myWords'), 
 
     myWords = JSON.parse(typeof rawWords != 'undefined' ? rawWords : '[]'); 
 

 
    // emtpy list 
 
    $list.html(''); 
 
    
 
    myWords.map(function(word){ 
 
     $list.append('<li>'+word+'</li>'); 
 
    }); 
 
    } 
 
    
 
})})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input type="text" id="new-word" value="" /><button id="add-to-array">add</button> 
 

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