¡¡Este código no funciona!!
Todo el código es correcto, solo no se agrega la etiqueta. ¿Por qué?
Quiero que se muestren los valores después de actualizar la página
$('#Search_Id').keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { let key = "Search_Text"; let value = $(this).val(); if (key && value) { if (localStorage.getItem(key)) { let vals = localStorage.getItem(key).split(','); if (!vals.includes(value)) { vals.push(value); vals.sort(); localStorage.setItem(key, vals.join(',')); } for (var i = 0; i <= vals.length - 1; i++) { let txt = vals[i]; $(".search-header .search-result ul.search-result-list li#story_search").append('<a name="search_txt" class="txt-search-story" href="#"><span>' + txt + '</span></a>'); } } else { localStorage.setItem(key, value); } location.reload(); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="story_search" class="span-row"></li> </ul>Considere el siguiente ejemplo.
Violín: https://jsfiddle.net/Twisty/L876vjmc/46/
HTML
<form id="searchForm"> Search: <input id="searchTerm" type="text"> </form> <ul> <li id="searchStory" class="span-row"></li> </ul> <button id="clearStory">Clear</button>JavaScript
$(function() { function getItems(key) { console.log("Getting Items from key: " + key); var results = []; try { results = localStorage.getItem(key).split(','); } catch (error) { console.log(error); } console.log(results); return results; } function setItems(key, data) { console.log("Setting Items into key: " + key); try { localStorage.setItem(key, data.join(',')); return true; } catch (error) { console.log(error); return false; } } function resetItems(key) { localStorage.removeItem(key); $("#searchStory").empty(); } function searchItems(key, term) { console.log("Search: " + key + ", for: " + term); var items = getItems(key); if (items.indexOf(term) == -1) { console.log("Not Found. Pushing it."); items.push(term); } items.sort(); console.log(items); return items; } $("#searchForm").submit(function(event) { event.preventDefault(); let k = "Search_Text"; let t = $("#searchTerm").val(); console.log("Trigger Search for: " + t); if (k && t != undefined && t.length > 0) { if (getItems(k).length == 0) { setItems(k, [t]); } var vals = searchItems(k, t); setItems(k, vals); $("#searchStory").empty(); $.each(vals, function(i, s) { $("<a>", { name: "search_txt", class: "txt-search-story", href: "#" }).html("<span>" + s + "</span>").appendTo($("#searchStory")); }); //location.reload(); } return false; }); $("#clearStory").click(function() { resetItems("Search_Text"); }); });Puede ser útil configurar funciones pequeñas para ayudar con operaciones comunes. Creé funciones para obtener, guardar y restablecer el almacenamiento local.
No es necesario envolver con un formulario, pero puede ser útil. Por ejemplo, uso LastPass y esto estaba causando problemas cuando presioné la tecla Intro en el elemento de entrada. Usando un formulario, el usuario puede ingresar texto y presionar Enter para enviar el formulario. Esto también funciona con dispositivos móviles cuando presionan "Ir" en el teclado móvil. Elimina una cantidad de código que ya no se necesita.
El resto es solo código jQuery limpio según su ejemplo.
Actualizar
https://jsfiddle.net/Twisty/L876vjmc/55/
Ahora tenemos showSearchStory que puede ejecutarse por un evento o por sí solo.